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");
});

README.md

Dialog Element

Resources

Screenshot