HTML Dialog Tag

HTML <dialog> tag is used to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window.

The <dialog> element uses a boolean attribute called open that activate element and facilitate user to interact with it.

HTML dialog is a new tag introduced in HTML5.

HTML dialog tag example

1. <div>  
2. <dialog id=”myFirstDialog” style=”width:50%;background-color:#F4FFEF;border:1px dotted black;”>  
3. <p><q>I am so clever that sometimes I don’t understand a single word of what I am saying.   
4. </q> – <cite>Oscar Wilde</cite></p>  
5. <button id=”hide”>Close</button>  
6. </dialog>  
7. <button id=”show”>Show Dialog</button>  
8. </div>  
9.   
10. <!– JavaScript to provide the “Show/Close” functionality –>  
11. <script type=”text/JavaScript”>  
12. (function() {    
13.     var dialog = document.getElementById(‘myFirstDialog’);    
14.     document.getElementById(‘show’).onclick = function() {    
15.         dialog.show();    
16.     };    
17.     document.getElementById(‘hide’).onclick = function() {    
18.         dialog.close();    
19.     };    
20. })();   
21. </script>