HTML <dialog> tag

Use of <dialog> tag

The <dialog> tag is new in HTML5. It is used to create a dialog box like a popup window. <dialog> element is shown within the active windows. The dialog box can be made more attractive can be added a button to hide and show the dialog box by using JavaScript.
Type: Block Element

Example of <dialog> tag

<dialog open> This is an open dialog. </dialog>

Supported Browsers

The following versions are the minimum versions that support the <dialog> tag fully.

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<dialog> 37.0 not supported not supported not supported 24.0

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<dialog open> This is an open dialog. </dialog>
</body>
</html>

Output

This is an open dialog.

More reference

By using JavaScript, the dialog box can hide and show with a clickable button.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="show"> Open dialog box </button>
<dialog>
<p> Put the words what you want to show. </p>
<button id="hide"> Close dialog box </button>
</dialog>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#hide').onclick = function() {
dialog.close();
};
</script>
</body>
</html>

Attribute of <dialog> tag

Attribute Value Notes
open open It defines the dialog box should be visible.
close close It defines the dialog box should be hidden (Default value no need to add).

Note that: Don't use close attribute because by default all the contents within dialog box are hidden i.e. <dialog> = <dialog close>.