Tweet Janela Modal com jQuery – Lightbox para Página Html e Imagens

Artigo retirado do Blog do Maujor (Vale apena acompanhar!)

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.

Anúncios Shopping UOL

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.

Créditos: Author: Kevin Liew | Tradução: Maujor
URL do artigo original em inglês: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

5. Efeitos Adicionais

• Veja como deixar a janela modal (lightbox) centralizada na vertical e horizontal, mesmo quando estiver utilizando o scroll na barra de rolagem.
• Clique aqui e saiba como abrir o lighbox (modal) sozinho automaticamente quando entrar na página.