Dialog API for JavaScript

The HTML5 dialog element was used as a reference for our dialog API.

The implementation is in the 'drupal.dialog' library. See Generalize the use of hook_library_info() for core JavaScript for more info about defining and using libraries.

The JavaScript API is rather simple, it will use an existing DOM node and display it as a dialog or a modal depending on the method used to show it:

var myDialog  = Drupal.dialog(ADOMElement, settings);

myDialog.show();
myDialog.showModal();
myDialog.close('a return value of some sort');

console.log(myDialog.returnValue);
console.log(myDialog.open);

Our implementation is firing 4 events dialog:beforecreate, dialog:aftercreate, dialog:beforeclose, dialog:afterclose on the window object. Those events have custom parameters to allow tweaking of the DOM element, the dialog object or the settings used for the specific implementation of the dialog API.

A hidden DOM element with an HTML ID of drupal-modal is available to pages using this library. Drupal code that opens modal dialogs is encouraged to pass this DOM element to Drupal.dialog().

Within a dialog, DOM elements with a CSS class of dialog-cancel close the dialog when clicked.

This modal should be accessible thanks to the work done currently in jQuery UI.