<!DOCTYPE> <html> <body> <dialog> <p>This is an HTML dialog popup</p> <button id="close">Close Dialog</button> </dialog> <button id="show">Show Me the Dialog</button> <script> var dialog = document.querySelector('dialog'); document.querySelector('#show').onclick = function() { dialog.show(); }; document.querySelector('#close').onclick = function() { dialog.close(); }; </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter