jQueryUI Dialogs

jQueryUI es un conjunto de bibliotecas de interfaz gráfica que complementa la biblioteca jQuery. Desarrollada por el mismo equipo, sigue las evoluciones de jQuery y propone un conjunto de elementos de interfaz (los widgets) tales como botones, acordeones, pestañas y lo que nos interesa aquí, ventanas emergentes CSS a las que llaman dialogs. Un dialog puede mostrar un mensaje simple o un formulario HTML, y puede ser modal, es decir que interrumpe la navegación del usuario y espera una acción antes de seguir (validación de un formulario, clic en un botón…).

La utilización de un dialog tal como se presenta en la documentación oficial sugiere que se debe crear un nuevo objeto para cada abertura de la ventana emergente, por ejemplo si el usuario hace un clic varias veces en el mismo enlace de abertura en la misma página. En la práctica, cada llamada a dialog() crea una nueva instanciación del objeto e inicia la abertura de la ventana.

Cuando se crea un nuevo objeto para cada acción del usuario, el comportamiento se vuelve errático: las ventanas se apilan, el usuario tiene la impresión falsa de deber hacer clic varias veces para cerrar la ventana (ya que en realidad las cierra sucesivamente), una ventana modal reabierta más tarde todavía contiene los datos de la anterior…

Por tanto, se debe más bien crear un único objeto a lo cual pasamos todas las opciones de creación (y en especial el autoOpen en false), y después llamar explícitamente la orden de abertura con la función dialog('open') y de cierre con dialog('close').

var $myDialog = $("<div id="mydialogId"></div>").dialog({
    autoOpen:     false,
    title:        "Título del 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 francés)
jQueryUI Dialogs (en portugués)
jQueryUI Dialogs (en inglés)