Dialog HTML

by

HTML <dialog> Tag

To create a popup dialog on an HTML page, the HTML <dialog> tag is used. It thus represents interactive components like a window or a dialog box. It was introduced in HTML5.

Example:

<!DOCTYPE html>
<html>
<body>
<div>  
<dialog id="example" style="width:60%; background-color:black; color: white; border:5px solid red;">  
<p><q>Great people, no matter their field, have similar habits. Learn them and use them in your own quest for greatness.</q> - <cite>Paula Andress</cite></p>  
<button id="close">Close</button>  
</dialog>  
<button id="open">Show Quote</button>  
</div>  
<script type="text/JavaScript">  
(function() {    
    var dialog = document.getElementById('example');    
    document.getElementById('open').onclick = function() {    
        dialog.show();    
    };    
    document.getElementById('close').onclick = function() {    
        dialog.close();    
    };    
})();   
</script>  
</body>
</html>

Explanation:

In the above example, we are using the HTML <dialog> tag to create a popup dialog on a web page.

Tag specific Attribute:

Attribute Uses
open Used to define an active dialog element with which the user can interact.

Global Attributes:

The HTML Global attributes are supported by the HTML <dialog> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <dialog> tag.

Supporting Browsers:

Chrome, Firefox, Opera, and Safari.