The WHATWG defines a new element called <dialog> that can be used to define modal and modeless dialogs within an HTML page. This example shows how to use this new element.
NOTE: This sample requires M31 or later in Chrome, and if necessary you might have to enable experimental web features in the chrome://flags page.
var dialog = document.querySelector('#dialog1'); document.querySelector('#show').addEventListener("click", function(evt) { dialog.showModal(); }); document.querySelector('#close').addEventListener("click", function(evt) { dialog.close("thanks!"); }); dialog.addEventListener("close", function(evt) { document.querySelector('#result').textContent = "You closed the dialog with: " + dialog.returnValue; }); // called when the user Cancels the dialog, for example by hitting the ESC key dialog.addEventListener("cancel", function(evt) { dialog.close("canceled"); });