HTML dialog tag

The HTML <dialog> tag represents a part of an application that the user can interact with. Examples of <dialog> usage could include a dialog box, inspector, or window.

The basic tag is written like this <dialog></dialog> with the content of the dialog box inserted between the opening and closing tags. If the element has the open attribute, it is displayed to the user once the page has loaded. With the absence of the open attribute, you will need to write a script to determine when the dialog should be displayed. You can also add styles to determine how it is presented.

NOTE: The global tabindex attribute does not apply to <dialog> elements.

<div>
<!-- Dialog -->    
<dialog id="myFirstDialog" style="width:50%;background-color:#FDFEE3;border:3px solid #EAEA12;">
<p><q>If at first you don't succeed... so much for skydiving.</q> - <cite>Henny Youngman</cite></p>
<button id="hide">Close</button>
</dialog>

<!-- "Show" button -->
<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>

Eg. :


If at first you don’t succeed… so much for skydiving.Henny Youngman



//