Last Updated on April 26, 2023 by Roshan Parihar
HTML dialog tag is used to show dialogs or window on the web page.
The dialog contains a boolean value open which we can use when we want to show dialog box. The boolean attribute can be control by using script(like javascript) to make it open or close.
Syntax
|
1 |
<dialog>Enter dialog content here...</dialog> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<dialog id="myDialog"> <h3>This is the heading</h3> <p>This is the dialog paragraph.</p> <button id="hide">Close</button> </dialog> <button id="show">Show Dialog</button> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('myDialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script> |
Output
List of HTML dialog tag attributes
| Sr. No. | Details attributes | Description |
|---|---|---|
| 1 | open | Used to specify whether the details tag content should be open or not. The open attribute does not contains boolean values true or false. we only include open inside <dialog> to make it remain open. |