web training room for online courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

HTML <dialog> Tag

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>  
Useful HTML5 Elements

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

Comment
Name Email Website
Subscribe
 
Dialog Tag HTML5


Consulting