The purpose of this module is to simplify the work in creating intelligent, useful dialogs that assist in user interactions. It is largely driven by markup and event delegation.

It is available on GitHub at


This module is pending deployment to the Gallery CDN. It is expected to be pushed soon.


The Dynamic Dialogs module handles common cases where you would want to have a dialog for certain actions.

If the form has a ‘data-async’ attribute, rather than calling form.submit() it uses and submits the form asynchronously.

Dialogs are opened by links, typically. For example, here is a link opens a dialog because the href is ‘#simple-form’. The ‘#simple-form’ is a template (a hidden div with the id “simple-form”). If the template contains a form, the form is then inspected and certain actions are performed on it. I strive to make this module do what you mean in all cases. If I fail at this, please let me know. I am @jshirley on twitter. I’m not hard to find.

If you need to pass in data to the form, like the URL, that is on the link.

This link opens the dialog, replacing the URL.

Very useful for sending something like a DELETE.

For loading a dialog with remote content, you use a different class. remote-dialog. This will allow a link like <a href=“/path/to/remove/content” class=“remote-dialog”>Remote Content</a>. Here is a real example. The title attribute on the link will set the panel’s title.

In the context of a table, with additional records, it becomes very useful. Each row alternates faked success or failures:

Table with Fancy Dialog Deleting
Name Role Manufacturer Product Model Actions
mysql1 Primary MySQL Dell PowerEdge R710 Edit Delete
mysql2 Primary MySQL Dell PowerEdge R710 Edit Delete
mysql3 Primary MySQL Dell PowerEdge R710 Edit Delete
app1 App Server Dell PowerEdge 2650 Edit Delete
app2 Primary MySQL Dell PowerEdge 2650 Edit Delete
bigdisk NAS Oracle Sun Storage 7110 Edit Delete

Are you sure you wish to delete this?

This form is templated. You can use {id} and set the "data-id" attribute in the trigger

The default style will hide the buttons, though. There is a keypress listener that handles pushing <enter> and attempts to do the right thing.

without them, <enter> won’t submit a form.

Usage strives to be very simple. Here is the gist of the actual code powering this page with additional comments: