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>
<dialog>
element<dialog>
element<p>
tag inside dialogdialog.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 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