Dialog - ZUI Documentation

Summary

Dialogs should be used when the user is asked a user for information that cannot be ignored. A great example would be to ask a user if he or she is sure to delete an entity. Another good example is to provide a quick way to create an entity without redirecting the user to a separate page.

AJAX Dialogs

It is possible to load dialogs via AJAX. The AJAX request should return the entire HTML code of the dialog. This means that the the entire HTML between (and including) the <div class="zui-dialog">...</div> elements.

Name	Description	Default Value
`data-zui-dialog-button`	Defines a button that controls the dialog. Valid values are: cancel When the element is clicked, the dialog will be closed. next When the element is clicked, the next panel will be activated. previous When the element is clicked, the previous panel will be activated.	`undefined`
`data-zui-dialog-remove-on-close`	Can be set to clean up the HTML code of the dialog element after closing. Valid values are: false Keeps the HTML code of the dialog element after the dialog has been closed. true Cleans up the HTML code of the dialog element after the dialog has been closed.	`false`
`data-zui-dialog-trigger`	Bind this attribute to an element that will trigger the dialog when clicked. Valid values are: CSS selector A CSS selector that refers to the dialog that should be opened. URL An URL to the page that loads the dialog so that the dialog can be opened via AJAX.	`undefined`

Name	Description
`zui-dialog`	The class that defines an element as a dialog.
`zui-dialog-inline`	Shows the dialog inline the page, so no popup is opened.
`zui-dialog-tiny`	Converts the dialog to a tiny dialog.
`zui-dialog-small`	Converts the dialog to a small dialog.
`zui-dialog-medium`	Converts the dialog to a medium dialog.
`zui-dialog-large`	Converts the dialog to a large dialog.
`zui-dialog-xlarge`	Converts the dialog to a large dialog.
`zui-dialog-full`	Converts the dialog to a full screen dialog.
`zui-dialog-header`	Defines the HTML element as the header of the dialog.
`zui-dialog-footer`	Defines the HTML element as the footer of the dialog.
`zui-dialog-footer-left`	The left side of the footer, can be used to display hints.
`zui-dialog-footer-right`	The right side of the footer, the place where the buttons are.
`zui-dialog-hint`	The representation of a hint.
`zui-dialog-page`	The representation of a page.
`zui-dialog-page-body`	The container that contains the panels on a page.
`zui-dialog-menu`	The element that contains the menu for a page.
`zui-dialog-panel`	The element that contains the content of a panel.
`zui-dialog-panel-no-padding`	Disables the padding on the panel.

Name	Description
`zui-dialog-button-clicked`	Called when a button in the dialog is clicked.
`zui-dialog-button-cancel-clicked`	Called when the cancel button is clicked.
`zui-dialog-button-next-clicked`	Called when the next button is clicked.
`zui-dialog-button-previous-clicked`	Called when the previous button is clicked.
`zui-dialog-closing`	Called before the dialog is closed.
`zui-dialog-closed`	Called after the dialog has been closed.
`zui-dialog-panel-activating`	Called when a panel is about to become active.
`zui-dialog-panel-activated`	Called when a panel has been made active.
`zui-dialog-panel-deactivating`	Called when a panel is about to be deactivated.
`zui-dialog-panel-deactivated`	Called when a panel has been deactivated.
`zui-dialog-opening`	Called when a dialog is about to be opened.
`zui-dialog-opened`	Called when a dialog has been opened.
`zui-dialog-centered`	Called when a dialog has been centered in the mididle of the screen. Called after zui-dialog-opened.

Name	Description
`zui-dialog-selector`	The selector for dialogs.
`zui-dialog-selector-inline`	The selector for inline dialogs.
`zui-dialog-selector-tiny`	The selector for tiny dialogs.
`zui-dialog-selector-small`	The selector for small dialogs.
`zui-dialog-selector-medium`	The selector for medium dialogs.
`zui-dialog-selector-large`	The selector for large dialogs.
`zui-dialog-selector-xlarge`	The selector for extra large dialogs.
`zui-dialog-selector-full`	The selector for full size dialogs.
`zui-dialog-selector-header`	The selector for the dialog title.
`zui-dialog-selector-footer`	The selector for the footer.
`zui-dialog-selector-footer-left`	The selector for the left footer.
`zui-dialog-selector-footer-right`	The selector for the right footer.
`zui-dialog-selector-hint`	The selector for a hint in the footer.
`zui-dialog-selector-page`	The selector for the page.
`zui-dialog-selector-page-body`	The selector for the body of the page.
`zui-dialog-selector-menu`	The selector for the menu.
`zui-dialog-selector-panel`	The selector for the panel.
`zui-dialog-selector-panel-no-padding`	The selector for the panel that should not have padding.
`zui-dialog-size-tiny-height`	The height of a tiny dialog.
`zui-dialog-size-tiny-width`	The width of a tiny dialog.
`zui-dialog-size-small-height`	The height of a small dialog.
`zui-dialog-size-small-width`	The width of a small dialog.
`zui-dialog-size-medium-height`	The height of a medium size dialog.
`zui-dialog-size-medium-width`	The width of a medium size dialog.
`zui-dialog-size-large-height`	The height of a large size dialog.
`zui-dialog-size-large-width`	The width of a large size dialog.
`zui-dialog-size-xlarge-height`	The height of an extra large size dialog.
`zui-dialog-size-xlarge-width`	The width of an extra large size dialog.
`zui-dialog-size-full-width`	The height of a full screen dialog.
`zui-dialog-size-full-height`	The width of a full screen dialog.
`zui-dialog-background`	The background of a dialog.
`zui-dialog-border`	The border of a dialog.
`zui-dialog-border-radius`	The border radius of a dialog.
`zui-dialog-border-radius-size-full`	The border radius for full screen dialogs.
`zui-dialog-min-height`	The minimum height of a dialog.
`zui-dialog-z-index`	The z-index used for dialogs.
`zui-dialog-header-background`	The background color of the dialog header.
`zui-dialog-header-color`	The font color of the header.
`zui-dialog-header-font-size`	The font size of the header.
`zui-dialog-header-height`	The height of the header.
`zui-dialog-header-padding`	The padding used for the header.
`zui-dialog-footer-background`	The background -color used for the footer.
`zui-dialog-footer-height`	The height of the dialog footer.
`zui-dialog-footer-padding`	The padding used for the footer.
`zui-dialog-menu-width`	The width of a page menu.
`zui-dialog-hint-color`	The font color of hints.
`zui-dialog-hint-line-height`	The line-height used for the hints.

Example

Show dialog

This is the content of the dialog panel.

Show tiny dialog Show small dialog Show medium dialog Show large dialog Show xlarge dialog Show full dialog

This is the content of the dialog panel.

Markup

<a href="#" class="zui-button" data-zui-dialog-trigger="#example-dialog">Show dialog</a>

<div class="zui-dialog zui-dialog-medium" id="example-dialog">
    <div class="zui-dialog-header">
        <h2>Dialog</h2>
        <i class="zui-icon zui-icon-x"></i>
    </div>

    <div class="zui-dialog-page">
        <div class="zui-dialog-page-body">
            <div class="zui-dialog-panel">
                <p>This is the content of the dialog panel.</p>
            </div>
        </div>
    </div>

    <div class="zui-dialog-footer">
        <div class="zui-dialog-footer-left">
            <div class="zui-dialog-hint">
                This is a hint.
            </div>
        </div>

        <div class="zui-dialog-footer-right">
            <button data-zui-dialog-button="ok">OK</button>
            <a href="#" data-zui-dialog-button="cancel">Cancel</a>
        </div>
    </div>
</div>

<div class="zui-dialog zui-dialog-inline" style="height: 500px;">
    <div class="zui-dialog-header">
        <h2>Dialog</h2>
        <i class="zui-icon zui-icon-x"></i>
    </div>

    <div class="zui-dialog-page">
        <div class="zui-dialog-menu">
            <ul>
                <li aria-selected="true">
                    <button>Panel 1</button>
                </li>
                <li>
                    <button>Panel 2</button>
                </li>
                <li>
                    <button>Panel 3</button>
                </li>
            </ul>
        </div>

        <div class="zui-dialog-page-body">
            <div class="zui-dialog-panel">
                <p>This is the content of the dialog panel.</p>
            </div>

            <div class="zui-dialog-panel" aria-hidden="true">
                <p>This is the content of another dialog panel.</p>

                <div style="height: 2000px;"></div>

                <p>Cool eh?</p>
            </div>

            <div class="zui-dialog-panel" aria-hidden="true">
                <p>This is another awesome panel.</p>

                <div style="height: 2000px;"></div>

                <p>Cool eh?</p>
            </div>
        </div>
    </div>

    <div class="zui-dialog-footer">
        <div class="zui-dialog-footer-left">
            <div class="zui-dialog-hint">
                This is a hint.
            </div>
        </div>

        <div class="zui-dialog-footer-right">
            <button data-zui-dialog-button="previous">Previous</button>
            <button data-zui-dialog-button="next">Next</button>
        </div>
    </div>
</div>

<p>
    <a href="#" class="zui-button" data-zui-dialog-trigger="#zui-docs-example-dialog" data-zui-dialog-size="tiny">
        Show tiny dialog
    </a>

    <a href="#" class="zui-button" data-zui-dialog-trigger="#zui-docs-example-dialog" data-zui-dialog-size="small">
        Show small dialog
    </a>

    <a href="#" class="zui-button" data-zui-dialog-trigger="#zui-docs-example-dialog" data-zui-dialog-size="medium">
        Show medium dialog
    </a>

    <a href="#" class="zui-button" data-zui-dialog-trigger="#zui-docs-example-dialog" data-zui-dialog-size="large">
        Show large dialog
    </a>

    <a href="#" class="zui-button" data-zui-dialog-trigger="#zui-docs-example-dialog" data-zui-dialog-size="xlarge">
        Show xlarge dialog
    </a>

    <a href="#" class="zui-button" data-zui-dialog-trigger="#zui-docs-example-dialog" data-zui-dialog-size="full">
        Show full dialog
    </a>
</p>

<div class="zui-dialog" id="zui-docs-example-dialog">
    <div class="zui-dialog-header">
        <h2>Dialog</h2>
        <i class="zui-icon zui-icon-x"></i>
    </div>

    <div class="zui-dialog-page">
        <div class="zui-dialog-page-body">
            <div class="zui-dialog-panel">
                <p>This is the content of the dialog panel.</p>
            </div>
        </div>
    </div>

    <div class="zui-dialog-footer">
        <div class="zui-dialog-footer-left">
            <div class="zui-dialog-hint">
                This is a hint.
            </div>
        </div>

        <div class="zui-dialog-footer-right">
            <button data-zui-dialog-button="ok">OK</button>
            <a href="#" data-zui-dialog-button="cancel">Cancel</a>
        </div>
    </div>
</div>