Criar Dialog Modal com JQuery

.NET

10/07/2013

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

Pjava

Curtidas 0

Respostas

Gabriel Simas

Gabriel Simas

10/07/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: [url]http://jqueryui.com/dialog/[/url]

Forte Abraço.
GOSTEI 0
Rodrigo Odasaki

Rodrigo Odasaki

10/07/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>
GOSTEI 0
Rodrigo Odasaki

Rodrigo Odasaki

10/07/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"
});
});
GOSTEI 0
Rodrigo Odasaki

Rodrigo Odasaki

10/07/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.
GOSTEI 0
POSTAR