HTML <dialog> Tag

<dialog id="dialog1">
<p>Only buy stocks that go up.</p>
<button id="hide">Close</button>
</dialog>
<!-- "Show" button -->
<button id="show">Display Stock Tip</button>

<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {  
    var dialog1 = document.getElementById('dialog1');  
    document.getElementById('show').onclick = function() {  
        dialog1.show();  
    };  
    document.getElementById('hide').onclick = function() {  
        dialog1.close();  
    };  
})(); 
</script>

Only buy stocks that go up.

The above example demonstrates usage of the <dialog> element.

The <dialog> element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window. Generally, JavaScript is needed in order to make the dialog interactive.

The above example shows how JavaScript can be used to allow the user to show and hide the <dialog> at the click of a button.

You can (optionally) use the open attribute to display the dialog automatically upon page load.

You can also create modal dialogs, which creates a mode where the main window can't be used until the user has interacted with the dialog.