jQueryUI Dialogs

jQueryUI é um conjunto de bibliotecas de interface gráfica que completa a biblioteca jQuery. Desenvolvida pela mesma equipe, acompanha as evoluções de jQuery e propõe um conjunto de elementos de interface (os widgets) tais como botões, acordeões, tabs e o que nos interessa aqui, pop-ups CSS que eles chamam de dialogs. Um dialog pode mostrar uma mensagem simples ou um formulário HTML, e pode ser modal, isto é que interrompe a navegação do usuário e esperar por uma ação antes de seguir (a validação de um formulário, o clicar num botão…).

A utilização de um dialog tal como apresentado na documentação oficial sugiere que deve ser criado um objeto novo para cada abertura do pop-up, por exemplo se o usuário clicar várias vezes na mesma ligação de abertura na mesma página. Na prática, cada chamada para dialog() cria uma instanciação nova do objeto e inicia a abertura do pop-up.

Quando criar um novo objeto para cada ação do usuário, o comportamento torna-se errático: as janelas empilham-se, o usuário tem a impressão falsa de dever clicar várias vezes para fechar a janela (desde que na realidade fecha-as sucessivamente), uma janela modal reaberta mais tarde ainda contém os dados da prévia…

Portanto, deve-se antes crear um objeto único ao qual passamos todas as opções de criação (e especialmente o autoOpen em false), e depois chamar explicitamente a ordem de abertura com a função dialog('open') e de fechamento com dialog('close').

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