RHOdesignBlog: News e Tutorials, Criação de Sites, Otimização de Sites SEO, Web Design, E-mail Marketing e Downloads | Rio de Janeiro

26 anos. Publicitário, diretor de arte web e flash designer pelo Infnet. Atualmente focado em estudos de usabilidade, otimização SEO e na implementação de soluções web que usem jquery, ajax e similares.

saiba mais

<!-- #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>

<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>

<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>

13 Comentários para “Janela Modal com jQuery – Lightbox para Página Html e Imagens”

1. Victor says:

   May 10, 2009 at 1:50 pm

   Muito bom, estava procurando. Obrigado!!!!
2. Ana says:

   May 18, 2009 at 3:17 pm

   Olá se eu quiser colocar o codigo java em um unico documento a função nao funciona pq?
3. Jéssica says:

   May 27, 2009 at 3:08 pm

   Eu gostaria de saber se é possível colocar uma imagem e o conteúdo na mesma janela modal e que programa eu tenho que utilizar.
4. admin says:

   May 27, 2009 at 9:26 pm

   Olá Jéssica!
   Qualquer tipo de conteúdo HTML pode ser inserido no código do modal: textos, fotos, flash, javascripts, qualquer coisa.
   Basta que você entenda um mínimo de criação de sites seguindo os padrões web, com formatação xhtml e css.
   É necessário que você tenha experiência em desenvolvimento de sites.

   Caso precise de ajuda especializada, nos envie um pedido detalhado para que nossa equipe possa avaliar, orçar e atendê-la.

   Obrigado,
   Rodrigo Filardi
5. Ana Paula says:

   June 8, 2009 at 11:33 am

   Olá!
   Adorei a janela modal, mas quando uso duas na mesma pagina um link chama o dialog e o segundo o dialog2 fica desconfigurado a tela..

   Poderia me ajudar?
6. Luiz Fernando says:

   June 22, 2009 at 10:54 am

   Bom Dia, muito bom este código; porém gostaria de saber se você poderia me ajudar fazer com que no link eu passe 2 informações?

   Exemplo: id & cod

   e onde está o código da janela, coloquei um include recebendo os 2 códigos?

   Desde já agradeço!!!
7. Rodrigo Filardi says:

   June 24, 2009 at 3:42 am

   Olá Luiz Fernando,
   que bom que gostou do código! Ele tem ajudado muita gente mesmo!
   Não poderei te dar uma força nessa, pois não sou programador, minha especialidade é outra… design, publicidade e marketing.
   Nesses códigos geralmente eu consigo fazer adaptações simples, mas essa que você precisa certamente tem uma finalidade que foge do meu alcance.
   É provável que ao mostrar essa página para algum programador php/jquery, em algum fórum de discussão, você consiga a resposta rápida!
   Aliás, se conseguir, posta aqui para ajudar o pessoal tb nessa, valew?! hehehehe
   Grande abraço!
8. Rodrigo Filardi says:

   June 24, 2009 at 5:58 am

   Olá Ana Paula,
   que bom que gostou da janela modal! Você já conseguiu resolver???
   Não poderei te ajudar nessa, pois não sou programador, minha especialidade é outra… design, publicidade e marketing. Acredito que seja alteração no CSS apenas… tem que ir testando…

   Grande abraço!
9. Fernando says:

   June 26, 2009 at 2:25 pm

   Muito útil essa janela personalizada, porém percebi um pequeno problema, quando a sua página possui barra de rolagem (mais de 1 página de rolagem), e o link da modal está lá embaixo, quando clicado a modal permenece no topo do inicio da pagina, para visualizar precisa rolar a barra até o inicio novamente.
   Para corrigir substitua no javascript, o trecho “armazena a largura e a altura da janela” pelo código abaixo:

   //armazena a largura e a altura da janela
   var left = 0;
   var top = 0;
   var winWidth = $(window).width();
   var winHeight = $(window).height();
   var dialogHeight = $(”#dialog”).height(); alert(dialogHeight);
   var dialogWidth = $(”#dialog”).width();

   if ($.browser.msie) {
   left = document.body.scrollLeft || document.documentElement.scrollLeft;
   top = document.body.scrollTop || document.documentElement.scrollTop;
   } else {
   left = window.pageXOffset;
   top = window.pageYOffset;
   }
   var topW = top + winHeight/2 – dialogHeight/2;
   var leftW = left + winWidth/2 – dialogWidth/2;

   $(id).css(’top’, topW);
   $(id).css(’left’, leftW);
10. Vinicius Martins says:

    October 22, 2009 at 10:41 am

    Olá, gostaria de saber como faço para fazer a janela pop-up carregar na abertura do site, em vez de ser via click.

    Obrigado.
11. Rodrigo Filardi says:

    October 23, 2009 at 2:17 am

    Olá Jéssica,
    Você pode que utilizar a mesma janela modal.
    Esse efeito possibilita inserir qualquer conteúdo HTML dentro da janela Modal.
    Você tem que saber construir sites para fazer isso. Saber código html e css apenas. Independente de qualquer programa.
    Bjos
12. Rodrigo Filardi says:

    October 23, 2009 at 2:20 am

    Olá Vinicius,
    você deverá usar uma programação via javascript na abertura do site para que ela chame a ação de abrir o modal. É simples, qualquer programador javascript poderá te ajudar.

    Abs
13. Nilson says:

    October 31, 2009 at 3:26 pm

    Olá muito bom o código, como faz para abrir na modal o div de uma outra página? acrescentei o link lalala e não abriu