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

Dismiss

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>
<p id="hideDialog">Dismiss </p>
</dialog>
<button id="btnDisplay">Display Dialog Content</button>  
//javascript code
<script type="text/JavaScript"> 
(function () {
var _dialog = document.getElementById('dialogExample');
document.getElementById('btnDisplay').onclick = function () {
_dialog.show();
};
document.getElementById('hideDialog').onclick = function () {
_dialog.close();
};
})();
</script>  

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

Comment
Name
Email
Website
Subscribe