Google News
logo
HTML5 Dialog Tag
The HTML <dialog> tag indicates a part of an application that the user can interact with. Examples of dialog could include a dialog box, inspector, or window.

The <dialog> element accepts a boolean attribute called open that sets the element to "active" and allows users to interact with it.
Example :
	
<!DOCTYPE html>
 <html>
     
    <head>
         <title>Dialog Tag</title>
    </head>
     
    <body>
         
        <div>
        <dialog id="Dialogbox" style="width:50%;background-color:#CCC; border:1px solid black;">
        <p>This is Sample dialog box !</p>
        <button id="hide">Close</button>
        </dialog>
        <button id="show">Click Here !</button>
        </div>
        
        <!-- JavaScript to provide the "Show/Close" functionality -->
        <script type="text/JavaScript">
        (function() {  
            var dialog = document.getElementById('Dialogbox');  
            document.getElementById('show').onclick = function() {  
                dialog.show();  
            };  
            document.getElementById('hide').onclick = function() {  
                dialog.close();  
            };  
        })(); 
        </script>
         
    </body>
     
</html>
Output :

This is Sample dialog box !