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 |
---|---|
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(); }); }()); |
ResultThe Dialog's Header
Hey, this is a dialog!
<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.