Dialog2

Summary

Modal dialogs are used to get a response from a user or reveal critical information that cannot be ignored.

Status

Examples

Code

HTML

Create a trigger which will be used by the JavaScript:

<button id="dialog-show-button" class="aui-button">Show dialog</button>

Render the dialog:

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
    <!-- Dialog header -->
    <header class="aui-dialog2-header">
        <!-- The dialog's title -->
        <h1 class="aui-dialog2-header-main">Hello World</h1>
        <!-- Actions to render to the left of the title -->
        <div class="aui-dialog2-header-actions">
            <button id="demo-header-action" class="aui-button">Header Action</button>
        </div>
        <!-- Actions to render on the right of the header -->
        <div class="aui-dialog2-header-secondary">
            <input id="demo-search" type="text" name="search">
        </div>
        <!-- Close icon -->
        <a class="aui-dialog2-header-close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
        </a>
    </header>
    <!-- Main dialog content -->
    <div class="aui-dialog2-content">
        <p>Hello World</p>
    </div>
    <!-- Dialog footer -->
    <footer class="aui-dialog2-footer">
        <!-- Actions to render on the right of the footer -->
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
        </div>
        <!-- Hint text is rendered on the left of the footer -->
        <div class="aui-dialog2-footer-hint">this is a hint</div>
    </footer>
</section>

Note that in the footer, the hint text (class="aui-dialog2-footer-hint") should be placed in the DOM below the footer actions (class="aui-dialog2-footer-actions") even though the hint text appears to the left of the footer actions

JavaScript

// Shows the dialog when the "Show dialog" button is clicked
AJS.$("#dialog-show-button").click(function() {
    AJS.dialog2("#demo-dialog").show();
});

// Hides the dialog
AJS.$("#dialog-close-button").click(function(e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").hide();
});

// Show event - this is triggered when the dialog is shown
AJS.dialog2("#demo-dialog").on("show", function() {
    console.log("demo-dialog was shown");
});

// Hide event - this is triggered when the dialog is hidden
AJS.dialog2("#demo-dialog").on("hide", function() {
    console.log("demo-dialog was hidden");
});

// Global show event - this is triggered when any dialog is show
AJS.dialog2.on("show", function() {
    console.log("a dialog was shown");
});

// Global hide event - this is triggered when any dialog is hidden
AJS.dialog2.on("hide", function() {
    console.log("a dialog was hidden");
});

Options

HTML attributes

Dialog2 configuration options are expressed through markup.

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-small" aria-hidden="true">
    <!-- inner content -->
</section>

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-warning" aria-hidden="true">
    <!-- inner content -->
</section>

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-small" aria-hidden="true"
       data-aui-modal="true">
   <!-- inner content -->
</section>

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-small" aria-hidden="true"
       data-aui-remove-on-hide="true">
   <!-- inner content -->
</section>

<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-small" aria-hidden="true"
       data-aui-focus-selector=".aui-dialog2-content :input:visible:enabled">
   <!-- inner content -->
</section>

API

To get a reference to the API for a dialog2 instance, call AJS.dialog2(selector), where selector can be a selector string, DOM node, or jQuery element.

var demoDialog = AJS.dialog2("#demo-dialog");

Methods

AJS.dialog2("#demo-dialog").show();

AJS.dialog2("#demo-dialog").hide();

AJS.dialog2("#demo-dialog").remove();

Events

Events are triggered when dialogs are shown or closed. These can be listened to for a single dialog instance, or for all dialogs.

AJS.dialog2("#demo-dialog").on("show", function() {
   console.log("demo-dialog was shown");
});

AJS.dialog2("#demo-dialog").on("hide", function() {
   console.log("demo-dialog was hidden");
});

AJS.dialog2.on("show", function() {
   console.log("a dialog was shown");
});

AJS.dialog2.on("hide", function() {
   console.log("a dialog was hidden");
});