The HTML <dialog> Tag is employed to form a replacement popup dialog on an online page. This tag represents a panel or different interactive element sort of a window.
This <dialog> Tag uses the Open Boolean feature known as Open which activates the part and allows the user to move along with it.
The HTML dialog may be a new Tag introduced in Hypertext Mark-up Language 5.
The dialog defines Tag popup dialogs and models.
The <dialog> Tag makes it easy to create popup dialogs and models on the online page.
HTML Dialog Tag Example
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML Dialog Tag
</title>
</head>
<body>
<h1>Example of HTML dialog tag</h1>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<dialog open>This is an open dialog window</dialog>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> The dialog tag is not supported in Safari and Edge (prior version 79).</p>
</body>
</html>Output:-
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
Note: The dialog tag is not supported in Safari and Edge (prior version 79).
Example of HTML Dialog Tag with JavaScript
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML Dialog Tag
</title>
</head>
<body>
<h1>Example of HTML dialog tag</h1>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<div>
<dialog id="dialogDemo" style="width:40%;background-color:#606060;border:1px dotted black;text-align: center;">
<p>Wellcome All Myprograming Users</p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
<p>This is some text.</p>
<p>This is some text.</p>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialogDemo');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
</body>
</html>Output:-
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
Attributes
open
hello, sir you are great…I m always read your blog and really helpful for me and everyone so thank u, sir…
Thank you…