Postagens
Janela Modal JQuery - JavaScript e CSS
Posted: quarta-feira, 2 de junho de 2010 by Adriano Moura in Marcadores: CSS, HTML, JavaScript
4
Vou ensinar a galera hoje a criar uma janela Modal, tipo aquelas que carregam sobre a página atual, substituindo inclusive o uso de Pop Ups em alguns casos.
Para começar baixe o pacote com JS e CSS aqui
Blz, criem um HTML e não se esqueçam de importar o JQuery, pois sem ela não funciona utilize o codigo abaixo entre <head> </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Agora iremos a explicação do Código
HTML
<!-- #dialog é o id do DIV definido como mostrado a seguir -->
<a href="#dialog" name="modal">Janela Modal Simples</a>
<div id="boxes">
<!-- #personalize sua janela modal aqui -->
<div id="dialog" class="window">
<b>Teste de Janela Modal</b>
<!-- Botão para fechar a janela tem class="close" -->
<a href="#" class="close">Fechar [X]</a><br />Janela Modal Simples<br /> Aqui vai o conteúdo da sua Janela Modal Simples.</div>
<!-- Não remova o div#mask, pois ele é necessário para preencher toda a janela -->
<div id="mask"></div>
</div>
<a href="#dialog" name="modal">Janela Modal Simples</a>
<div id="boxes">
<!-- #personalize sua janela modal aqui -->
<div id="dialog" class="window">
<b>Teste de Janela Modal</b>
<!-- Botão para fechar a janela tem class="close" -->
<a href="#" class="close">Fechar [X]</a><br />Janela Modal Simples<br /> Aqui vai o conteúdo da sua Janela Modal Simples.</div>
<!-- Não remova o div#mask, pois ele é necessário para preencher toda a janela -->
<div id="mask"></div>
</div>
Script
<script type="text/javascript">
$(document).ready(function() {
//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();
//armazena o atributo href do link
var id = $(this).attr('href');
//armazena a largura e a altura da tela
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Define largura e altura do div#mask iguais ás dimensçoes da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});
//efeito de transição
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//armazena a largura e a altura da janela
var winH = $(window).height();
var winW = $(window).width();
//centraliza na tela a janela popup
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//efeito de transição
$(id).fadeIn(2000);
});
//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
$('#mask, .window').hide();
});
//se div#mask for clicado
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
$(document).ready(function() {
//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();
//armazena o atributo href do link
var id = $(this).attr('href');
//armazena a largura e a altura da tela
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Define largura e altura do div#mask iguais ás dimensçoes da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});
//efeito de transição
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//armazena a largura e a altura da janela
var winH = $(window).height();
var winW = $(window).width();
//centraliza na tela a janela popup
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//efeito de transição
$(id).fadeIn(2000);
});
//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
$('#mask, .window').hide();
});
//se div#mask for clicado
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
CSS
<style>/* O z-index do div#mask deve ser menor que do div#boxes e do div.window */
#mask {position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */
#boxes #dialog {
width:375px;
height:203px;
</style>
}
/* posiciona o link para fechar a janela */
.close {
display:block;
text-align:right;
}
</style>
#mask {position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */
#boxes #dialog {
width:375px;
height:203px;
</style>
}
/* posiciona o link para fechar a janela */
.close {
display:block;
text-align:right;
}
</style>
URL do artigo original: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Valeu a todos
