jQueryUI Dialogs

jQueryUI est un ensemble de bibliothèques d'interface graphique qui vient compléter la bibliothèque jQuery. Développée par la même équipe, elle suit les évolutions de jQuery et propose un ensemble d'éléments d'interface (des widgets) tels que des boutons, des accordéons, des tabulations et ce qui nous intéresse ici des pop-up CSS appelés dialogs. Un dialog peut afficher un simple message ou un formulaire HTML, et peut être modal, c'est-à-dire qu'il interrompt la navigation de l'utilisateur et attend de celui-ci une action avant de continuer (validation d'un formulaire, clic sur un bouton…).

L'utilisation d'un dialog telle que présentée dans la documentation officielle laisse à penser qu'il faut créer un nouvel objet à chaque ouverture de fenêtre, par exemple si l'utilisateur clique plusieurs fois sur le même lien d'ouverture sur la même page. En pratique, chaque appel à dialog() crée une nouvelle instance de l'objet et lance l'ouverture de la fenêtre.

Lorsqu'on crée un nouvel objet à chaque action de l'utilisateur, le comportement devient erratique : les fenêtres s'empilent, l'utilisateur semble devoir cliquer plusieurs fois pour fermer sa fenêtre (puisqu'en réalité il les ferme successivement), une fenêtre modale réouverte plus tard contient encore les données de la précédente…

Il faut donc plutôt créer un objet unique auquel on passe toutes les options de création (et principalement le autoOpen à false), puis lancer explicitement la demande d'ouverture via la fonction dialog('open') et de fermeture via dialog('close').

var $myDialog = $("<div id="mydialogId"></div>").dialog({
    autoOpen:     false,
    title:        "Titre du dialog",
    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 (en portugais)
jQueryUI Dialogs (en anglais)
jQueryUI Dialogs (en espagnol)