Criar Dialog Modal com JQuery
Como eu crio um Dialog Modal com jquery para substituir os Alerts's?
Pjava
Curtidas 0
Respostas
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.
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
10/07/2013
Faça download da biblioteca: jqueryui em http://jqueryui.com/
Os exemplos estão na demos do site.
1º
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>
Os exemplos estão na demos do site.
1º
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
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"
});
});
$(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
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.
function openDialogCarregando() {
$('#dialog-carregando').dialog('open');
}
Para fechar é só usar o close.
Bastar olhar na documentação.
GOSTEI 0