Tutorial: técnica para criar uma janela modal com jQuery. O script desse efeito, seleciona todos os elementos
a (links) cujo atributo
name tenha sido definido com valor “modal” e mostra em uma janela modal(estilo lightbox) o conteúdo do DIV cujo
id tenha sido definido no atributo
href do link. jQuery realmente simplifica e torna fácil as coisas. Dê uma olhada nos exemplos que eu desenvolvi para demonstrar a técnica. Eles me parecem bem interessantes.
Caso você não saiba o que é uma janela modal, você pode visualizá-la na página de demonstração que eu desenvolvi.
O autor usa no seu website o
facebox (inspirado no facebook). Outros, tais como, lightbox, thickbox, multibox, litebox…… e muitos outros destinam-se a obter a janela modal, cada um deles com suas funcionalidades particulares.
Vamos ao nosso exemplo. Eu mostrarei como criar uma janela modal para apresentar o conteúdo do div cujo id é definido no atributo href do link, conforme dito anteriomente.
Os objetivos são :
- Procurar em todo o documento o(s) elemento(s)
a (link) com o atributo name="modal"e a ele(s) atribuir o evento click para disparar a ação de mostrar, em uma janela modal, o conteúdo do divcujo id é definido no atributo href do link.
- Criar uma máscara que preencha toda a tela.
- Criar uma janela modal que seja simples e fácil de modificar.
1. Marcação HTML e atributos do elemento a
<!-- #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>
2. 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>
3. JavaScript
<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>
Os códigos são diretos e de fácil entendimento. Não se esqueça de linkar para a biblioteca jQuery ao documento.
4. Conclusão
É isso, e somente isso, que você precisa saber para criar uma janela modal simples. Neste tutorial eu ensinei como apresentar o conteúdo de um div dentro de uma janela modal. Você pode aplicar os conceitos aqui mostrados para criar o efeito de mostrar uma galeria de imagens dentro de um iframe.
Para aqueles que estão em busca de uma janela modal totalmente personalizável, esta técnica que eu mostrei é perfeita. Dúvidas e contribuições? Poste nos comentários. Obrigado por ler.
5. Efeitos Adicionais
