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.

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 example

This is an example of dialog element in html5


code for creating dialog in html5
<dialog id="dialogExample" style="padding:10px;border:solid 1px #0094ff;border-radius:10px;"> <p>
This is an example of dialog element in html5
<p id="hideDialog">Dismiss </p>

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

//javascript code

<script type="text/JavaScript"> 
function () {
    var _dialog = document.getElementById('dialogExample');
    document.getElementById('btnDisplay').onclick = function () {;

document.getElementById('hideDialog').onclick = function () {


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

Dialog Tag HTML5
Web Designing Tutorials
HTML5 Tags Examples | Join Web Design Course