CSS
Hover the classes to see matching element(s) in the example
xfDialog matches an Element that represents a betterFORM Dialog
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control

# The Dialog Element

A Dialog element is a container form control to aggregate various form controls.

The Dialog is unbound and rendered above the main form. betterFORM provides a show and a hide action to display and hide the dialog.

XForms 1.1 does not provide any Dialog control, but the 1.2 recommendation will probably contain a XForms Dialog Module .

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

show dialog Login Dialog Username Password

Login | Cancel

## XForms Markup

    <xf:trigger id="trigger1">
        <xf:label>show dialog</xf:label>
        <bfc:show dialog="loginDialog" ev:event="DOMActivate"></bfc:show>
    </xf:trigger>

    <bfc:dialog id="loginDialog">
        <xf:label>Login Dialog</xf:label>
        <xf:group appearance="full">
            <xf:input>
                <xf:label>Username</xf:label>
                <xf:value ref="login"></xf:value>
            </xf:input>
            <xf:input>
                <xf:label>Password</xf:label>
                <xf:value ref="password"></xf:value>
            </xf:input>
            <table>
                <tr>
                    <td>
                        <xf:trigger style="float:left;margin-right:4px;">
                            <xf:label>Login</xf:label>
                             <bfc:hide dialog="loginDialog" ev:event="DOMActivate"></bfc:hide>
                        </xf:trigger>
                    </td>
                    <td>
                        <xf:trigger>
                            <xf:label>Cancel</xf:label>
                            <bfc:hide dialog="loginDialog" ev:event="DOMActivate"></bfc:hide>
                        </xf:trigger>
                    </td>
                </tr>
            </table>
        </xf:group>
    </bfc:dialog>