jQueryUI Dialogs

jQueryUI is a set of graphical interface libraries that comes on top of jQuery. Developped by the same team, it follows jQuery's evolutions and proposes a set of interface elements (named widgets) such as buttons, accordions, tabs, and what interesses us here CSS popups called dialogs. A dialog can display a text message or an HTML form, and it can be modal, i.e. it stops the user's navigation and waits for an action to go on (the validation of a form, the click of a button…).

The usage of a dialog as shown in the official documentation makes believe that we have to create a new object each time we open a dialog, for instance when the user clicks many times on the same trigger link on a page. In practice, each call to dialog() creates a new instance of the object and opens the modal window.

When we create a new object with each action of the user, the dialog behavior becomes erratic: modal windows are piling up, the user seems to have to click many times to close a window (as in reality, she closes them successfully), a modal window opened later on still shows the data from the previous one…

The way to go is rather to create a unique object to which we pass on all the creation options (and mainly the autoOpen set to false), then to explicitly launch its opening with the dialog('open') function, and its closing with the dialog('close') function.

var $myDialog = $("<div id="mydialogId"></div>").dialog({
    autoOpen:     false,
    title:        "This is my dialog title",
    height:        300,
    width:        500,
    modal:        true,
    position:    ['center', 50]
});

$("button[name='myButton']", "buttonContextId").button().click(function() {
    $myDialog.dialog('open');
    return false;
});

$myDialog.dialog('close');

jQueryUI Dialogs (in French)
jQueryUI Dialogs (in Portuguese)
jQueryUI Dialogs (in Spanish)