MooDialog is a very nice Javascript plugin for creating your own dialog boxes that are much better looking than the native confirms, alerts, and prompts. The plugin offers much more in functionality and can be used to create dialog boxes with an iframe’s content, ajax responses, and existing DOM elements among others.

Once created, these dialog boxes can be programmatically opened, closed, or disposed off. The online documentation is very well written, but it doesn’t mention how would you open or close a dialog that was created using an existing DOM element.

To create a dialog from an existing element, we would just call .MooDialog() on the element.

<div id="myElement">
  ...
</div>

$('myElement').MooDialog(); // that's all

However, since this method call simply returns myElement (for chaining purposes, I believe) and not the MooDialog object, we cannot call open() and close() on it. The plugin has a brilliant solution to take care of the problem - the Element store.

The dialog object is stored with the key “MooDialog” into the element store. So to get access to the dialog object for “myElement”, simply call retrieve(‘MooDialog’) on it.

var dialog = $('myElement').retrieve('MooDialog');
dialog.open();
dialog.close();