» 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 atributoname="modal"e a ele(s) atribuir o evento click para disparar a ação de mostrar, em uma janela modal, o conteúdo dodivcujoidé definido no atributohrefdo 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.
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.
Muito bom, estava procurando. Obrigado!!!!
Olá se eu quiser colocar o codigo java em um unico documento a função nao funciona pq?
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.
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
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?
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!!!
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!
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!
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);
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.
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
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
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
como faço pra abrir uma dessas janelas ao carregar a página? que código devo colocar no onLoad do Body?
Excelente Artigo!
Abraços!!!
cara tentei fazer, segui passo a passo + não deu certo
olha o html
[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]
[a href="#dialog" name="modal" id="termo"]Termos de Compromisso[/a]
e o css tá igual, na verdade tá praticamente igual
Gostei do código e implementei através de um select ao invés de um . no firefox funcionou perfeitamente porém no IE6 quando o modal entra…o select permanece na tela…existe alguma forma de “matar” isso?
fiz uma alteração nessa parte
//se o botãoo fechar for clicado
$(‘.window .close’).click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
//efeito de transição
$(‘#mask’).fadeOut(1000);
$(‘.window’).fadeOut(1000);
});
//se div#mask for clicado
$(‘#mask’).click(function () {
$(‘#mask’).fadeOut(1000);
$(‘.window’).fadeOut(1000);
});
});
assim quando fechamos a modal ele faz um fade tb
O teu site está bem legal, mas só precisa aumentar o espaço entre as linhas dos paragráfos, muita informação concentrada, legibilidade zero com esse fundo escuro!
Muito bacana a ajuda, Adriano!
Logo logo o RHOdesign Blog irá mudar de layout, espero que curta e possa dizer o que achou no próximo post de atualização! Abraços
Como colocar barra de rolagens na Janela MOdal para que eu possa inserir textos maiores e o leitor possa rolar. Aguardo resposta é Urgt
Olá juliana,
com um pouquinho de conhecimento em CSS, você conseguirá fazer isso inserindo uma DIV com overflow.
Pode utilizar o modal para chamar um iframe também, com tamanho de altura definido, que já criará o scroll automaticamente.
Tem como colocar várias em uma só página? como?
Funcionou em todos os navegadores, infelizmente não funcionou no IE6, ta de cara? kkkk, ainda existe pessoas e empresas que utilizam esse IE6 KKKKKK,,,, Se vc tiver alguma solução imediata ficarei grato. Valeu e parabéns.
Boa tarde, quando adorei esse tuto, era exatamente o que eu procurava, porém estou com uma dúvida, pois quando coloco mais de um link modal ex: dialog; dialog2; dialog3, o dialog segue a configuração feita no css ja as demais nao, poderia me ajudar?
Eu gostaria de saber se com este mesmo código usando jquery é possível fazer uma janela (ou div) realmente modal, ou seja, o usuário não conseguir clicar nos campos que pertencem ao form mas que não são da div modal, só conseguir voltar ao form normal se clicar em OK ou em Cancelar na Popup…
Modal centralizado na vertical e horizontal
Olá galera. Verifiquei uma coisa chatinha nesse script jquery, é que se a pagina tiver barra de rolagem e o link estiver na parte inferior da pagina. Eu tinha resolvido isso trocando o atributo position da div #boxes de absolute para fixed. Funcionou perfeitamente no Firefox e outros navegadores de compilação similar, porém no Internet Explorer ainda assim apresentava erro na aparição da janela modal. Seguindo o conselho Fernando e do Adriano Mota, adaptei o script para que acontecesse o seguinte.
Quando clicado no link, irá aparecer na tela a janela modal centralizada verticalmente e horizontalmente, idependente do navegador e independente da posição do link na página, quando a janela modal estiver aberta e você rolar a pagina para baixo, ela permanecerá em vista acompanhando a rolagem da página, e ao clicar fora da janela modal ou no botão fechar dela, um efeito fadeOut acontecerá.
O script completo ficou assim:
$(document).ready(function() {$(‘a[name=modal]‘).click(function(e) {e.preventDefault();var id = $(this).attr(‘href’);var maskHeight = $(document).height();var maskWidth = $(window).width();$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});$(‘#mask’).fadeIn(1);$(‘#mask’).fadeTo(“slow”,0.5);var left = 0;var top = 0;var winH = $(window).height();var winW = $(window).width();var dialogHeight = $(“#dialog”).height();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 + winH/2- dialogHeight/2;var leftW = left + winW/2- dialogWidth/2;$(id).css(‘top’, topW);$(id).css(‘left’, leftW);$(id).fadeIn(1000); });$(‘.window .close’).click(function(e){e.preventDefault();$(‘#mask’).fadeOut(1000);$(‘.window’).fadeOut(1000);});$(‘#mask’).click(function(){$(this).fadeOut(1000);$(‘.window’).fadeOut(1000);});});
Lembrando que na folha de estilo css você deve alterar a div #boxes .window, para o seguinte:
#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
E a div #boxes .dialog , e indico controlar o tamanho da janela modal nesta div, com os atributos
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
onde Width e Height você controlará o tamanho, indico usarem porcentagem.
ola galera, sera que alguem poderia me ajudar, estou desenvolvendo um site que estou usando lightbox nas imagens, soh que em todos que eu vejo quando se clica na parte de fora da imagem(parte escura) a lightbox ja fecha e no meu nao clico um monte de vez pra escolher outra foto e nao sai, tem um botao X pra sair , blz mais gostaria tb de quando clicasse fora da imagem saisse,
alguma ideia do que acontece. obs, nao manjo nada de j-query fui soh fuçando ate conseguir chegar a esse ponto. obrigado pela atençao aguardo resposta.
Pessoal adorei o efeito, é bem simples e facil de manipular, mas estou com dificuldade em uma coisa queria que a modal fechasse depois de alguns segundos… poderiam me ajudar???
Olá Fernando,
Usei sua modificação para a modal funcionar com barra de rolagem e ela não funcionou. Alguém teria a função de carregar a modal ao iniciar a pagina sem o uso do botão?
Obrigada Carol
Como abrir janela lightbox ao entrar no site
Pessoal,
Segue o código para iniciar a página sem o uso de um botão,
carregando a modal ao entrar no site.
function openModal(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});
//transition effect
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”, 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css(‘top’, winH / 2 – $(id).height() / 2);
$(id).css(‘left’, winW / 2 – $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
$(‘.window .modalClose’).click(function (e) {
e.preventDefault();
$(‘#mask’).hide();
$(‘.window’).hide();
});
$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});
}
$(document).ready(function() {
$(‘a[name=modal]‘).click(function(e) {
//Cancel the link behavior
e.preventDefault();
openModal($(this).attr(‘href’));
});
openModal(‘#dialog’);
});
Aconselho o pessoal mudar a div para isso:
#boxes .window {
position:fixed;
bottom: 0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
com isso a div vai acompanhar a tela se a pessoa mexer no scroll.
Falou.
Olá, gostaria de saber como implementar este efeito que você fez no tópico “5. Efeitos Adicionais”, no qual você clica no link e a página desce até o início do texto que você deseja, no caso, desceu até um comentário que mostra “Como abrir janela lightbox ao entrar no site”. Obrigado !
P’E'R’F'E’C'T. MUITO BOM CARA! MANDOU BEM … MUITO OBRIGADOOO…
Gostaria de saber se é possível incluir uma LightBox com o conteúdo de CURTIR do Facebook em meu blog.
Agradeço desde já.
Gostaria de saber se é possível quando acabar de passar o vídeo na janela modal fechar automaticamente e ir para o inicio do site?
Olá pessoal estou tentanto colocar video e nao consigo,
me envia alguma dica. Obrigado