Dialog

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

Example

Show dialog

Dialog

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

This is the content of the dialog panel.

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>
Fork me on GitHub