HTML <dialog> element is employed to generate a fresh popup dialog on a webpage. This particular tag symbolizes a dialog box or another interactive element such as a window.
The <dialog> tag utilizes a boolean attribute known as "open" to enable the element and allow users to engage with it.
HTML dialog is a new tag introduced in HTML5.
HTML dialog tag example
Example
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of what I am saying.
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
The HTML dialog element also provides support for global attributes and event attributes in HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<dialog> |
Yes | Yes | Yes | Yes | Yes |