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]


, , ,

Atualmente existe 47 comentários



  1. Leandro 21/06/2012:

    Cara tem como direcionar para uma pagina em vez de um div?



  2. Matheus 29/06/2012:

    Muito bom o post aprendi mesmo. Agora, só um pequeno detalhe:

    width = largura
    height = altura

    vc trocou os dois xD

    vlw!!!



  3. Matheus 29/06/2012:

    Só esclarecendo mais um pouco, vc declarou as variáveis certas mas na hora do css vc trocou:

    $(‘#mascara’).css({‘width’:alturaTela,’height’:larguraTela});

    vlw



  4. Rodrigo Aramburu 29/06/2012:

    opa, que vergonha :(

    ta arrumado agora, espero :)



  5. Claudio Junior 03/08/2012:

    Gostei muito do código era o que eu estava precisando.

    Valeu!



  6. Leander 27/08/2012:

    Funcionou perfeitamente, mas como muito leigo que sou com js ainda eu gostaria de alguma ajuda sobre como colocar uma galeria de imagem também em js dentro dessa janela modal. Obrigado



  7. bernardo 31/08/2012:

    gostaria de saber se tem função java que faça com que a função seja realizada baseada numa hora especifica…

    tipo meio dia mostra a janela.

    tem como ?



  8. Eduardo 11/09/2012:

    Coloquei o código do modal em outra pagina.html até ai tudo bem, mas como o modal é chamado por id na mesma pagina, como eu faço para chamar o modal que esta localizado em outro html.



  9. Rodrigo Aramburu 11/09/2012:

    Eduardo não entendi direito o que você está tentando fazer, se a janela modal está em outra página talvez você tenha que carregar ela na página atual com ajax($(‘#id’).load(‘url’)) e jogar em algum lugar da página antes de mostrar o modal. Isso depende do que você quer fazer.



  10. Eduardo 11/09/2012:

    Eu criei uma pagina com o nome modal.html, porque antes ficava na mesma pagina index.html então resolvi separar o modal porque vai ter mais que uma pagina chamando ele, mas utilizando o exemplo de modal acima como eu faço a chamada dele sendo que o modal agora esta em pagina separada?
    Antes era feito assim e funcionava normalmente:
    Detalhes como eu posso trocar esse href=”#janela4″ para chamar o modal que esta em modal.html?



  11. Eduardo 11/09/2012:

    Eu criei uma pagina com o nome modal.html, porque antes ficava na mesma pagina index.html então resolvi separar o modal porque vai ter mais que uma pagina chamando ele, mas utilizando o exemplo de modal acima como eu faço a chamada dele sendo que o modal agora esta em pagina separada?
    Antes era feito assim e funcionava normalmente:
    /* href=”#janela4″ rel=”modal”>Detalhes/a> */
    como eu posso trocar esse href=”#janela4″ para chamar o modal que esta em modal.html?



  12. Moska 13/09/2012:

    Seria possível fazer esse esquema, porém chamando uma página externa, exemplo no meu menu index.html, tenho a opção Cadastrar… quando clicar em Cadastrar chamar a página cadastar.html já com a mascara cobrindo o fundo e mostrando apenas os campos que eu quiser no caso de formulário ?

    Obrigado.



  13. Rodrigo Aramburu 14/09/2012:

    Eduardo e moska, acredito que os dois querem fazer algo parecido, na minha opinião o melhor seria criar na mesma página uma janela modal vazia que se abriria normalmente como no exemplo e apenas carregaria o conteudo que está no outro arquivo para dentro da janela modal via AJAX. O recurso do modal é apenas para mostrar um div que está oculto, para pegar uma janela modal em outro arquivo daria muitas voltas. Dá para fazer mas é um pouquinho complicado para explicar por aqui



  14. Eduardo 14/09/2012:

    eu precisava muito criar um modal que fica em uma pagina a parte, e quando eu precisar apenas fazer uma chamada para ele em outra pagina.
    só conseguir fazer isso com um plugin jquery, más fica muito pesado se puder me ajudar por email msm agradeço.



  15. Rodrigo Aramburu 15/09/2012:

    Eduardo e moska, confiram o o update do post acho que pode ajudar vocês



  16. Moska 16/09/2012:

    - Rodrigo Aramburu -

    Cara o principal problema de fazer em uma pagina só, seria o fato de estar fazendo um menu, com vários cadastros e cada um seria um form diferente com uma ação diferente. Tpo o q vc me passou deu certo, porem veja se vc pode me ajudar… eu montei um template dividido em 4 div`s… Banner, Menu, Conteudo e Rodape. O que eu quero fazer é o seguinte, quando clicar numa opcao do Menu a mascara que ofucas o fundo abrir na pagina inteira, tampando o Banner, Menu o Conteudo e o rodape, e da maneira q vc atualizou so esta cobrindo a div Conteudo… o que posso fazer ? Qual propriedade alterar ! Obrigado…



  17. Moska 16/09/2012:

    - Rodrigo Aramburu -

    Só mais uma duvida aonde eu defino o posicionamento de abertura da pagina que eu chamei, porque assim eu to tentando abrir ele no centro da pagina, porem esta abrindo muito embaixo no canto inferior direito :/

    Obrigado !



  18. Moska 16/09/2012:

    - Rodrigo Aramburu -

    Estou enchendo o saco provavelmente porem, ignore os 2 posts acimas, pois ja consegui resolver o problema. Porém surgiu outra duvida, acontece o seguinte eu possuo formularios de tamanhaos diferentes e qndo eu seto o tamanho na tag
    .window{ width e height:300px; ele acaba ficando padrao para todos os links q eu chamar e existe diferenca nos tamanhos…. o q eu posso fazer ? Obrigado pela ajuda !



  19. Karen Isis 17/10/2012:

    Gostaria de utilizar a janela modal para exibição de algumas imagens e textos. Funcionou perfeitamente, criei também links para próxima imagem e anterior, mas não volta, apenas avança nas fotos. Segue abaixo:

    X Fechar

    Descrição da Foto
    Anterior |
    Galeria |
    Próxima

    X Fechar

    Descrição
    Anterior |
    Galeria |
    Próxima

    Como faço pra chamar a div janela anterior no link?
    Desde já agradeço, também adorei o artigo.



  20. Karen Isis 17/10/2012:

    Abaixo o código criado a partir do artigo, como citei acima o href=”anterior” não funciona. Não consigo identificar o motivo.
    <!–

    X Fechar

    Legenda Foto
    Voltar |
    Próxima

    X Fechar

    Legenda Foto
    Anterior |
    Galeria |
    Próxima

    –>



  21. Rodrigo Aramburu 17/10/2012:

    Karen Isis, com o código que você postou não consigo entender, pode hospedar em algum lugar fica mais fácil para alguém te ajudar



  22. Karen Isis 17/10/2012:


  23. Floris Filho 17/10/2012:

    Como faço para executar sem precisar clicar no link?



  24. Karen Isis 17/10/2012:

    É um documento do google docs, vou tentar novamente postar o codigo abaixo:
    O problema é voltar para janela1 após a exibição da janela2.




    ”’




    ”’


    ”X Fechar”

    ”descrição”
    ”Voltar”’ |
    ”Próxima”


    ”X Fechar”

    ”descrição”
    ”Anterior” |
    ””Galeria”” |
    ”Próxima”



  25. Mauro Alb 22/10/2012:

    cara, valeu mesmo, muito legal esse exemplo seu, me ajudou muito.



  26. Rafael Martins Alves 14/11/2012:

    Ficou muito legal. Gostaria de saber se tem como aparecer algum dos div ao carregar a página sem a necessidade de clicar no link. No caso algum dos div aparece ao carregar a página e ao fechar esse div ele possa escolher novamente o div que já foi carregado ou escolher os que não foram.
    Agradeço a ajuda



  27. Marcos 14/11/2012:

    Olá colegas… bem legal o código, porém gostaria de saber se é possível colocar dados vindos do BD através do PHP. Por ex:

    <a href="?usuario=NomeUsuario; ?>” rel=”modal”>

    tentei colocar #janela2 após a variável e em um onclick, mas não funcionou.

    Obrigado!



  28. Rafael Martins Alves 16/11/2012:

    Marcos, consegui colocar dados da BD, utilizando o ajax, onde no onclick do link chamo a função em ajax que me retorna dentro do div #janela2 o resultado da consulta, assim aparece na página,, qualquer coisa te envio oque tenho aki…passa seu e-mail…

    Ainda tenho dúvida de como mostrar um dos div ao carregar a página sem a necessidade de clicar no link..alguém pode me ajudar…

    abraço



  29. Gerson 13/06/2013:

    Excelente!
    Ajudou muito, valeu!



  30. samy 13/06/2013:

    cara eu te amo!
    huahiahui
    valeu cara!
    tava precisando aprender isso muito



  31. Ricardo 17/06/2013:

    Boa tarde, desculpa pela ignorância, mas comecei a programar essa semana. O JavaScript eu insiro como um Script dentro do HTML ou resgato ele de uma rrquivo externo?



  32. Jean Toledo 27/06/2013:

    Muito show! Valeu, excelente explicação, e o exemplo funcionando tbm, parabéns!!!



  33. Edinho 15/07/2013:

    Olá Rafael Martins Alves, sei que sua última resposta já faz algum tempo, mas estou com o mesmo problema que vc estava ao tentar exibir o conteúdo do BD na janela modal. Passo os valores por URL: <a name="modal" href=index.php?cod=, porém a janela modal não funciona. Ela só funciona quando o href é igual ao nome da div, como no exemplo acima. Será que seria possível vc me ajudar a corrigir esse problema como vc fez no seu??? Meu email é edinho_rodrigues@hotmail.com
    Se vc ou alguém mais puder me ajudar, ficarei imensamente grato.



  34. Wallace 21/08/2013:

    Bom tutorial!!!
    Só tem um detalhe: Quando o cara rola o mouse para redimensionar o tamanho da página, o tamanho da DIV#MASCARA não acompanha o tamanho de WINDOW.

    Consegui resolver isso dessa forma:

    $(window).resize(function(){
    //Executa a configuração de tamanho da DIV#MASCARA de novo
    });



  35. Junior Oliveira 13/09/2013:

    Assim como o Edinho, gostaria que o Rafael Martins Alves enviasse para o meu email a dica de como colocar o valor dos Banco de Dados no modal. Estou com muita dificuldade e nao consigo. desde já agradeço.
    Meu E-Mail: franciscoanto@gmail.com



  36. Cerebro Vasconcelos 07/10/2013:

    Muito bom, funciona mesmo



  37. emerson 15/10/2013:

    Muito bom cara! Me ajudou bastante! Parabéns!



  38. Cássio Costa 24/10/2013:

    Rodrigo, é possível criar uma barra de rolagem na janela modal caso o texto seja bastante grande? Como ficaria?



  39. Rodrigo Aramburu 24/10/2013:

    daria para colocar o conteudo dentro de um div e para este div configurar no css propriedade overflow:scroll



  40. Dalton 25/10/2013:

    Galera tenho uma tabela e nela um botao editar em cada cliente, nesse botao editar gostaria de carregar em um modal as informações desse cliente. Consigo recuperar o codigo via JavaScriptm porem preciso dessa informação em php para fazer o select no banco. Consigo passar algum paramentro pro modal?? TO PRECISANDO MUITO DE AJUDAR.. OBRIGADO!!!!



  41. Carlos Alberto de Campos Bessa 23/11/2013:

    Rodrigo! Muito Obrigado pela dica! Deus o abençoe



  42. Ricardo 23/01/2014:

    Amigo, vc confundiu vc colocou left e right mas não seria left e top?
    Sem querer ser chato pois achei muito legal, muito explicativo, muito bem elaborado!!



  43. Rodrigo Aramburu 24/01/2014:

    Ricardo, obrigado errei mesmo, ficou mais de um ano com esse erro e acho que ninguém viu, provavelmente isso prova que as pessoal só olha o código mesmo :)

    já consertei



  44. Alexandre 06/03/2014:

    Boa noite,
    É possivel travar para ele nao fechar quando clicamos no fundoe apenas no botao?



  45. Aline 10/04/2014:

    Como instalar essa janela modal no blog?



  46. Rodrigo Aramburu 14/04/2014:

    Aline em um blog teria que editar o template e isso vi depender do blog, no wordpress tem uns plugin para isso bem fácil



  47. João Carlos 15/04/2014:

    Experimente trocar o top por:

    var top = $(window).scrollTop()+10;

    Isso irá gerar a janela modal 10 pixéis abaixo da posição da barra de rolagem, isto é, não haverá necessidade de rolar a barra para ver a janela modal.

    Obrigado pela postagem!

Não faça como seu código, deixe um comentário!