HTML dialog tag

by Online Tutorials Library July 14, 2014

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

 <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> 

Test it Now

Output:

HTML dialog tag also supports global and event attributes in HTML.