Free Web Development Online Tutorials, Learn to Code
Learn HTML5 Syntax, Webpage Designing using HTML, HTML5 Tags, HTML Tutorial for Beginners

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

HTML5 Tags Examples

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