Dialog2 upgrade guide

<button type="button" class="aui-button aui-button-link" id="old-dialog-trigger">Dialog trigger</button>

(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();

    });

}());

<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();

});