Boteco Digital

Criando uma janela modal simples com jQuery

29/04/2012
Rodrigo Aramburu

Você já deve ter visto em vários sites uma janela modal. Para quem não a conhece pelo nome é aquela janela que quando clicamos para abri-la ela escurece o resto do site e coloca uma pequena janela em evidência e se você clicar fora da janela ela desaparece.

Vamos criar um exemplo simples onde definiremos os links que irão abrir na forma modal utilizando o atributo rel com o valor “modal” e a janela que irá abrir será definida pelo atributo href onde colocaremos o id do elemento(div) que queremos que seja visualizado em forma modal.

Marcação HTML

	<a href="#janela1" rel="modal">Janela modal</a>

	<div class="window" id="janela1">
		<a href="#" class="fechar">X Fechar</a>
		<h4>Primeira janela moda</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
		<p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
	</div>


	<!-- mascara para cobrir o site -->	
	<div id="mascara"></div>

Na linha 1 definimos um link para abrir a janela modal como vimos na introdução.

Na linha 3 criamos uma div que será nossa janela modal, note que definimos uma class e um id, o class vai facilitar caso tivermos várias janelas modal diferentes no site e o id será para abrir somente a correta. Dentro dela colocamos todo o conteúdo normalmente, só não esqueça de colocar dentro dela um link para fechá-la.

Na linha 12 criamos um div para ser o fundo escuro que irá cobrir toda a área da site ficando acima dela somente a nossa janela.

O CSS

.window{
	display:none;
	width:300px;
	height:300px;
	position:absolute;
	left:0;
	top:0;
	background:#FFF;
	z-index:9900;
	padding:10px;
	border-radius:10px;
}

#mascara{
	display:none;
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background-color:#000;
}

.fechar{display:block; text-align:right;}

Definimos a propriedade diplay em none para os elementos #mascara e .window para que não apareçam quando a página for carregada, já que só serão mostradas quando se clicar no link.

A janela modal será centralizado em relação os navegador e isso será feito por javascript então precisamos apenas definir a propriedade position em absolute e podemos definir as propriedades left e top como “0″ já que os valores corretos serão atribuídos por javascript no momento que o link for clicado.

Outra propriedade importante de frisar é o z-index, já que a janela modal deve ficar na frente da mascara devemos definir o z-index do .window maior que o da div #mascara, lembrando que que a div #mascara deve ter um z-index positivo e um pouco alto pois ela deve sobrepor todos os outros elementos da página.

O Javascript

$(document).ready(function(){
	$("a[rel=modal]").click( function(ev){
		ev.preventDefault();

		var id = $(this).attr("href");

		var alturaTela = $(document).height();
		var larguraTela = $(window).width();
	
		//colocando o fundo preto
		$('#mascara').css({'width':larguraTela,'height':alturaTela});
		$('#mascara').fadeIn(1000);	
		$('#mascara').fadeTo("slow",0.8);

		var left = ($(window).width() /2) - ( $(id).width() / 2 );
		var top = ($(window).height() / 2) - ( $(id).height() / 2 );
	
		$(id).css({'top':top,'left':left});
		$(id).show();	
 	});

 	$("#mascara").click( function(){
 		$(this).hide();
 		$(".window").hide();
 	});

 	$('.fechar').click(function(ev){
 		ev.preventDefault();
 		$("#mascara").hide();
 		$(".window").hide();
 	});
});

Como vemos na linha 2 selecionamos todos os link que possuem o atributo “rel” igual a “modal” e adicionamos o evento de click a ele. Na linha 3 cancelamos o evento padrão do link(para ele não ir a lugar nenhum) na linha 5 capturamos o valor do atributo href, que no nosso exemplo definimos que seria o id do elemento que irá ser mostrado como janela modal.

Nas linhas 7 e 8 pegamos a largura da janela do navegador e altura documento HTML para definir como tamanho da nossa mascara, se pegarmos a altura da janela do navegador obteremos somente altura da área atualmente visualizada e a mascara preta não irá cobrir tudo se o usuário fizer uma rolagem de página.

Na linha 11 configuramos o tamanho da nossa área de mascara preta com os valores pegos nas linha 7 e 8.

Na linha 12 mostramos a mascara com um efeito de “fade” e na linha 13 criamos uma transparência.

Na linha 15 calculamos a posição em que a janela modal deve aparecer, para isso pegamos a largura da janela do navegador e dividimos por 2, mas se colocar a janela modal neste ponto ela aparecerá com o canto superior esquerdo centralizado neste ponto, então temos que colocar o meio da janela modal alinhado com o centro da janela do navegador, então dividimos a largura da janela modal por 2 e subtraímos este valor do valor do valor da metade da janela do navegador, isso fará ficar corretamente alinhado. Na linha 16 fazemos isso também para a altura.

Na linha 18 configuramos as propriedades top e left com os valores calculados na linha 15 e 16. Na linha 19 mostramos a janela modal.

Na linha 22 definimos um evento de click para a mascara para quando for clicado fora da janela modal, tanto a janela modal e a máscara preta desapareçam.

Veja o exemplo funcionando

Acredito que seja isso, é bem simples e permite ter uma personalização bem grande de forma fácil, diferente de utilizar alguma biblioteca como o jQuery UI, que é muito bonita e fácil de utilizar, mas se precisar mudá-la pode ser um desafio.

Esse artigo foi “baseado” no do imortal Maujor

[update 14/09/2012]
Veja um exemplo onde o conteúdo do é carregado de uma arquivo separado
[/update]


, , ,
comments powered by Disqus