<!-- 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 -->
<h2 class="aui-dialog2-header-main">Always use sentence case</h2>
<!-- Actions to render on the right of the header -->
<div class="aui-dialog2-header-secondary">
<form class="aui" action="#">
<input id="demo-search" class="text" type="search" name="search">
</form>
</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-submit-button" class="aui-button aui-button-primary">OK</button>
<button id="dialog-next-button" class="aui-button">Next</button>
<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>
// 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");
});