How to add message as popup(dialog)?

<section id="demo-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" role="dialog" aria-hidden="true">
    <header class="aui-dialog2-header">
        <h2 class="aui-dialog2-header-main">Captain...</h2>
        <button class="aui-dialog2-header-close" aria-label="close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog"></span>
        </button>
    </header>
    <div class="aui-dialog2-content">
        <p>Popup message</p>
    </div>
    <footer class="aui-dialog2-footer">
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">Make it so</button>
        </div>
    </footer>
</section>

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

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

</script>