XSLTForms/XForms 1.2/"dialog" element

< XSLTForms‎ | XForms 1.2


"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 ProgramEdit

   <style type="text/css">
    #details {
     width: 250px;
     height: 100px;
   <xf:instance xmlns="">
   <xf:bind ref="email" type="xf:email"/>
   <xf:setfocus ev:event="xforms-ready" control="email"/>
  <xf:dialog id="details">
   <xf:input id="firstname" ref="firstname">
    <xf:label>First Name : </xf:label>
   <xf:input ref="lastname">
    <xf:label>Last Name : </xf:label>
    <xf:action ev:event="DOMActivate">
     <xf:hide dialog="details"/>
     <xf:setfocus control="email"/>
   <xf:label>Contact Information</xf:label>
   <xf:input id="email" ref="email" incremental="true">
    <xf:label>E-mail : </xf:label>
    <xf:action ev:event="DOMActivate">
     <xf:show dialog="details"/>
     <xf:setfocus control="firstname"/>


  1. W3C XForms WG Wiki - Dialog candidate specifications for XForms 1.2
  2. AJAXForms Addons - Specific dialog addon
  3. Orbeon Dialog Extension