html5 dialog box example

We can use <dialog> tag to create a new popup dialog on a web page just like dialog in window, dialog is a new element introduced in HTML5.

<dialog>
   closed.
</dialog>


<dialog open>
   open.
</dialog>
use of <dialog> tag in html5
  • You can’t write text directly inside the <dialog> element
  • div or span element cannot be nested inside <dialog> element
  • easy way to write text using a <p> tag inside dialog
dialog.show(); // show the dialog
dialog.close(); // close the dialog
dialog.hide(); // hide the dialog

Here is some css code that helps giving some colourful look for the dialog on webpage.

<style>
dialog::backdrop {
    background: repeating-linear-gradient( 45deg, 
    rgba(255, 0, 0, 0.2), 
    rgba(255, 0, 0, 0.2) 1px,
    rgba(255, 0, 0, 0.3) 1px, 
    rgba(255, 0, 0, 0.3) 20px );
}
</style>
dialog example
This is an example of dialog element in html5
code for creating dialog in html5
<dialog id="dialogExample" open"> This is an example of dialog element in html5
<button id="hideDialog">Dismiss </button>
</dialog>

<button id="btnDisplay">Display Dialog Content</button>  


//javascript code
<script type="text/JavaScript"> 

var _dialog = document.getElementById('dialogExample');

document.getElementById('btnDisplay').onclick = function () {
    _dialog.showModal();
};

document.getElementById('hideDialog').onclick = function () {
_dialog.close();
 
</script>  

html5 dialog box example with javascript and css

Using dialog element you can show highlighted text on mouse over or on click, very easy to use

HTML5 Tags Examples | Join Web Design Course