HTML <dialog> Tag using the 'open' Attribute

<dialog id="dialog1" open>
<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 open attribute on the <dialog> element.

The open attribute specifies that the dialog should be displayed when the page is initially loaded. Without this attribute the dialog is not shown to the user. Therefore, JavaScript is usually required to enable the user to interact with the dialog.

About 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 also create modal dialogs, which creates a mode where the main window can't be used until the user has interacted with the dialog.