<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>
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.
<dialog>
ElementThe <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.