use html5 dialog control in webpage design, 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.
<dialog> closed. </dialog> <dialog open> open. </dialog>
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.show(); // show the dialog dialog.close(); // close the dialog dialog.hide(); // hide the dialog
Here is some css code that helps giving some colourful look for the dialog on webpage.
<style>
dialog::backdrop {
background: repeating-linear-gradient( 45deg,
rgba(255, 0, 0, 0.2),
rgba(255, 0, 0, 0.2) 1px,
rgba(255, 0, 0, 0.3) 1px,
rgba(255, 0, 0, 0.3) 20px );
}
</style>
dialog example
code for creating dialog in html5
<dialog id="dialogExample" open"> This is an example of dialog element in html5
<button id="hideDialog">Dismiss </button>
</dialog>
<button id="btnDisplay">Display Dialog Content</button>
//javascript code
<script type="text/JavaScript">
var _dialog = document.getElementById('dialogExample');
document.getElementById('btnDisplay').onclick = function () {
_dialog.showModal();
};
document.getElementById('hideDialog').onclick = function () {
_dialog.close();
</script>
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
Html5 tutorial: learn how to use html5 tags in html page designing
HTML5 Tags Examples | Join Web Design Course