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>

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

Group Training