Dialog2 upgrade guide

This page is a guide to upgrading from the Dialog 1 API to the new API.

Dialog2

Initialisation

Old API New API
Demo code
AخA
 
<button type="button" class="aui-button aui-button-link" id="old-dialog-trigger">Dialog trigger</button>
x
 
(function() {
    var dialog = new AJS.Dialog({
        width: 800,
        height: 500,
        id: "example-dialog",
        closeOnOutsideClick: true
    });
    dialog.addHeader("The Dialog's Header");
    dialog.addPanel("Panel 1", "<p>Hey, this is a dialog!</p>", "panel-body");
    AJS.$("#old-dialog-trigger").on("click", function(e) {
        e.preventDefault();
        dialog.show();
    });
}());
Demo code
Result
 
<button id="new-dialog-trigger" class="aui-button aui-button-link">Dialog2 trigger</button>
<section id="new-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" role="dialog" hidden>
    <div class="aui-dialog2-header">
        <h2>The Dialog's Header</h2>
    </div>
    <div class="aui-dialog2-content">
        Hey, this is a dialog!
    </div>
</section>
 
AJS.$("#new-dialog-trigger").on("click", function(e) {
    e.preventDefault();
    AJS.dialog2("#new-dialog").show();
});

Conversion guide

More examples coming soon.