XSLTForms/XForms 2.0/"dialog" element

Presentation "dialog" element allows to show and hide controls in a popup approach. A dialog is a container control with a mandatory @id attribute. It can be placed anywhere in the (X)HTML body element, considering that it will be transformed as a disabled (or hidden) DIV element by the XSLT step of XSLTForms. A dialog is rendered using z-index property in a modal popup, with another DIV element covering all the main elements, with a lower z-index value, to disable interaction with controls. When changing controls values in a dialog, all other controls can be refreshed whether they are in this dialog or anywhere else. Label is not yet supported by XSLTForms and there is no X trigger. Dialogs can be nested. Ancestor dialogs are masked automatically, changing the z-index property of the covering DIV. Two actions are defined for dialogs management: "show": this action will enable the dialog identified by the @dialog attribute value "hide": this action will disable the dialog identified by the @dialog attribute value Usually, for each dialog, there should be, at least, one trigger for showing (opening) it and another, in itself, for hiding (closing) it. Sample Program <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events"> <head> <title>Contact</title> <style type="text/css"> #details { width: 250px; height: 100px; } </style> <xf:model> <xf:instance xmlns=""> <contact> <email/> <firstname/> <lastname/> </contact> </xf:instance> <xf:bind ref="email" type="xf:email"/> <xf:setfocus ev:event="xforms-ready" control="email"/> </xf:model> </head> <body> <xf:dialog id="details"> <xf:input id="firstname" ref="firstname"> <xf:label>First Name : </xf:label> </xf:input> <br/> <xf:input ref="lastname"> <xf:label>Last Name : </xf:label> </xf:input> <br/> <xf:trigger> <xf:label>Close</xf:label> <xf:action ev:event="DOMActivate"> <xf:hide dialog="details"/> <xf:setfocus control="email"/> </xf:action> </xf:trigger> </xf:dialog> <xf:group> <xf:label>Contact Information</xf:label> <xf:input id="email" ref="email" incremental="true"> <xf:label>E-mail : </xf:label> </xf:input> <xf:trigger> <xf:label>Details</xf:label> <xf:action ev:event="DOMActivate"> <xf:show dialog="details"/> <xf:setfocus control="firstname"/> </xf:action> </xf:trigger> </xf:group> </body> </html> References W3C XForms WG Wiki - Dialog candidate specifications for XForms 1.2 AJAXForms Addons - Specific dialog addon Orbeon Dialog Extension