Spread the love

The HTML <dialog> Tag is employed to form a replacement popup dialog on an online page. This tag represents a panel or different interactive element sort of a window.

This <dialog> Tag uses the Open Boolean feature known as Open which activates the part and allows the user to move along with it.

The HTML dialog may be a new Tag introduced in Hypertext Mark-up Language 5.

The dialog defines Tag popup dialogs and models.

The <dialog> Tag makes it easy to create popup dialogs and models on the online page.

HTML Dialog Tag Example

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        HTML Dialog Tag
    </title>
</head>
<body>

<h1>Example of HTML dialog tag</h1>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>

<dialog open>This is an open dialog window</dialog>

<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> The dialog tag is not supported in Safari and Edge (prior version 79).</p>

</body>
</html>

Output:-

This is some text.

This is some text.

This is some text.

This is an open dialog window

This is some text.

This is some text.

This is some text.

This is some text.

Note: The dialog tag is not supported in Safari and Edge (prior version 79).

Example of HTML Dialog Tag with JavaScript

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        HTML Dialog Tag
    </title>
</head>
<body>

<h1>Example of HTML dialog tag</h1>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<div>  
<dialog id="dialogDemo" style="width:40%;background-color:#606060;border:1px dotted black;text-align: center;">  
<p>Wellcome All Myprograming Users</p>  
<button id="hide">Close</button>  
</dialog>  
<button id="show">Show Dialog</button>  
</div>  
 <p>This is some text.</p>
<p>This is some text.</p> 
<!-- JavaScript to provide the "Show/Close" functionality -->  
<script type="text/JavaScript">  
(function() {    
    var dialog = document.getElementById('dialogDemo');    
    document.getElementById('show').onclick = function() {    
        dialog.show();    
    };    
    document.getElementById('hide').onclick = function() {    
        dialog.close();    
    };    
})();   
</script>  

</body>
</html>

Output:-

This is some text.

This is some text.

This is some text.

Wellcome All Myprograming Users

This is some text.

This is some text.

Attributes

open


Spread the love

Related Posts

2 thoughts on “HTML Dialog Tag

Leave a Reply

Your email address will not be published. Required fields are marked *