Array
(
)

Criar Dialog Modal com JQuery

Pjava
   - 10 jul 2013

Como eu crio um Dialog Modal com jquery para substituir os Alerts's?

Gabrielsimas
   - 10 jul 2013

PJava,

Para tal, você pode usar o jQueryUI que é um framework baseado no jQuery e que já tem um objeto para criar dialogs, além disso, conta com várias opções de Dialog, como Modal ou não modal. Você pode acessá-lo em: http://jqueryui.com/dialog/

Forte Abraço.

Rodrigo Odasaki
   - 10 jul 2013

Faça download da biblioteca: jqueryui em http://jqueryui.com/

Os exemplos estão na demos do site.


Crie as div no documento e altere o display dele para none:
<div id="dialog-carregando" style="display: none">
<p>Carregando.. aguarde.</p>
</div>

<div id="dialog-sucesso" style="display: none">
<p>Sucesso</p>
</div>

Rodrigo Odasaki
   - 10 jul 2013

2º Informe o modal no construtor do documento JS.
$(document).ready(function() {
{
$('#dialog-carregando').dialog({
autoOpen: false,
width: 400,
height: 130,
show: "clip",
hide: "fade",
title: "Aguarde um momento"
});

$('#dialog-sucesso').dialog({
autoOpen: false,
width: 400,
height: 130,
show: "clip",
hide: "fade",
title: "Informações atualizadas com sucesso"
});
});

Rodrigo Odasaki
   - 10 jul 2013

Basta agora chamar elas em qualquer function, exemplo:

function openDialogCarregando() {
$('#dialog-carregando').dialog('open');
}

Para fechar é só usar o close.
Bastar olhar na documentação.