Janela modal com jQuery
Publicado em: 2009-04-16 — 17.997 visualizacoes
Neste tutorial eu vou mostrar para vocês uma técnica para criar uma janela modal com jQuery. O script proposto para o efeito, seleciona todos os elementos a (links) cujo atributo name tenha sido definido com valor "modal" e mostra em uma janela modal 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
URL do artigo original: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2009-04-16 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/trackback no seu site.
Opa! Gostei, ainda que quero/estou aprender Javascript bruto, é sempre bom usar o jQuery.
Maujor, continue assim, suas publicações foram essências para mim e para o ótimo trabalho que tenho hoje. Acima de tudo parabéns.
Um forte abraço. Sérgio
Muito bom o tutorial, creio que vai ajudar muita gente. Seria legal também você fazer um tutorial para criação de uma janela modal para uma galeria de imagens, onde a largura e altura do modal são dinâmicas. Creio que essa é a dúvida de muita gente, com isso as pessoas acabam recorrendo a utilização de plugins. Abraços.
Opa, parabéns pelo tuto, Show de bola.
Entendi tudinho, realmente sua didática é impressionante Maujor. Lembro-me que o conheci quando queria aprender CSS, e seu site http://www.maujor.com foi essencial.
Só para fomentar os comentários, discordo de Pedro Rogério, posi como nunca tenho tempo para nada, sempre recorro a plugins, pois nunca tenho tempo para fazer tudo “na tora”. Acredito que, se eles existem é para serem usados. Se alguém desenvolveu algo e quis compartilhar, eu não vou desprezar seu esforço.
Como exemplo, utilizo este blog, sei que é feito com wordpress, você não o fez “do Zero”. Este formulário que estou utilizando para redigir, o “sysntax hiligth” dos códigos, tudo já estava pronto em algum lugar, e o Maujor sabiamente os reaproveitou.
Não acho nada de arrado nisso.
@Neto
Você tem toda razão. Se alguém já “quebrou a cuca”, encontrou uma solução e disponibilizou para uso, vamos usá-la.
A sugestão do @Pedro Rogério é muito boa, pois em alguns casos necessitamos de soluções mais simples que as soluções prontas e além disso temos que considerar o caráter didático de mostrar uma solução.
Obrigado a vocês dois pelo comentário.
Alguém se habilita a desenvolver a solução proposta pelo Pedro?
muito bom tutorial maujor, utilizo muito janelas modal em meus projetos…
Excelente o turorial……………com certeza vai auxiliar muita gente
gostei demais desse tuto…bem esclarecedor…i olhar muito bom pra sistemas php…já estou ate testando em um aqui…bom mesmo…espero ancioso pelo livro..abraço!
Uma pergunta a respeito dessa janela ela pode receber conteudo dinamico ou ainda não, pois pretendo usar ela com conteúdo que outra pessoa vai carregar no adm
@Samira
Pode sim!
Coloque o conteúdo dinâmico dentro da
divcujo atributo classe tem valor igual a “window”.<div class="window">
...conteúdo dinâmico aqui...
</div>
Show de bola!
Parabéns Maujor! Mais um excelente post e mais uma dúvida esclarecida! Seu blog assim como o seu site, não tem do que discordar, é referência número 1!!!
Parabéns
Parabéns. Otima explicação
Tenho uma dúvida. No IE 6, quando a página principal possui combos, a div #mask não os sobrepõem. Gostaria de saber existe alguma forma de resolver esse problema, já que tenho muitos usuários que utilizam esse browser. Obrigado e parabéns pelo site.
Preciso criar uma janela modal que seja acionado assim que abre a página, ou seja, quando a URL for acessada, o usuário terá a opção de ver a página ou não.
Exemplo:
——————————————————————-
Este vídeo pode ser improprio para alguns usuários
Entrar –> Sim quero ver.
Sair –> Não quero ver.
——————————————————————-
Já consegui intalar o “SimpleModal”, mas depois que a página é aberta têm que clicar no link “That is the question” para ele aparecer, veja abaixo:
http://www.digaki.com/noticias/africa-do-sul-comemora-dia-da-liberdade-15-anos-apos-o-fim-do-apartheid
Consegui fazer funcionar como eu queria, por favor testem para ver se ficou bom. Valeu!
É dinossauro, sei que não tem nexo com o teu post, mas… mais um dos seus tutoriais salvou meu dia, e olha que eu achava que sabia todas as manhas de css.
valeu d+
Olá pessoal, alguem saberia me orientar como chamar essa janela, atravez de um botao em flash poderia ser tanto ActionScript 2 ou 3.
Ótimo tutorial. Parabéns.
Já utilizo JQuery em algumas aplicações.
Sou fã incondicional da biblioteca.
Parabéns pelo blog!
Um ótimo lugar para aprender mais!
muito boa a matéria
[...] 16-4-2009: – If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor [...]
muito interessante
Olá,
Tenho uma pagina em PHP que lista os clientes cadastrados em uma tabela mysql. Quero usar esse exemplo de janela modal para editar os dados dos clientes, ou seja, ao clicar em um cliente a janela modal seria acionada para edição de seus respectivos dados.
Como faço para identificar o cliente a ser editado na janela modal (saber que estou editando os dados do João e não do Marcos) ???
É possivel implementar essa idéia???
Gostei muito do tutorial.
Modifiquei um pouco para atender ao meu objetivo, mas estou com dificuldade para passar um parâmetro para carregar o conteúdo do banco de dados.
Tem alguma dica que possa facilitar?
E parabéns também pelo livro. Está sendo muito útil em meu aprendizado da jQuery.
Qual a função do z-index?
Tenho uma modal aplicada em site joomla (www.portaldepaulinia.com.br) onde de cara abre a janela, só que itens que deveriam ficar por trás (outros banners) aparecem na frente…
Estou achando que deve ter a ver com o z-index mas já alterei os valores no código e não obtive resultado…
Abraços e Maujor, parabéns.
@Fabio Lima
Para saber mais sobre o z-index visite o link a seguir.
http://www.vw3schools.com/Css/pr_pos_z-index.asp
E caso a sua janela modal aparece sobre algum banner em flash. Este deve ser definido com o parametro wmode com valor transparent. Adicionando o parametro
@Mauro
Obrigado amigo, só editando o link correto que é:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Quanto ao wmode transparent eu já havia aplicado mas parece que é a ordem de carregamento e z-index das div’s no joomla!
Assim que arrumar de fato eu dou retorno (se é que interessa a lguém né! Rsrsrs).
Abraços
Adorei o seu blog.
Como sempre, disposto a ajudar os aflitos.
Esta materia veio a calhar, numa altura em que precisava mesmo de algo parecido para alguns trabalhos.
Obrigado Mauricio e, continue mandando….
Parabéns pelo tutorial…Gostaria de saber um jeito de tornar essa janela modal acessível no caso de o usuário estar com javascript desabilitado, tipo o link continuar funcionando direcionando a uma nova página caso o javascript não funcione.
Olá Maujor,
Acabo de comprar o seu livro sobre Jquery, não vejo a hora de chegar, e tomara que tenha outros truques não revelados ainda em seu blog, uma dúvida que tive, tem algum tipo de cd, ou dvd, com alguns exemplos práticos ?
Obrigado, parabéns pela dedicação a web que você tem, com certeza ajudou a formar muitas mentes brilhantes, e vai continuar ajudando.
Eu diria que o Maujor é o Renato Russo da web, hehehe…
Valeu Abração.
Boa Tarde Maujor!
Primeiro quero parabenizá-lo pelo blog tem excelentes tutorias que me ajudam muito em meus projetos
Sobre a janela modal, tenho uma duvida:
É o seguinte dentro da janela modal que é aberta na “index” abre um iframe chamando outra “pagina1″ e nela tem links para outras “páginas2″ só que os links da “pagina2″ não abrem na janela modal, é como se tivesse colocado um target (_blank) no link. Teria como o link da “pagina2″ abrir a “pagina3″ dentro da janela modal?
O Endereço é: http://zunca.net/novo/index.html
Link Produtos.
Abração!!!
Sou novo no java, tem como me enviar passo a passo para a produção desse java. Obrigado.
Maujor,
Parabéns por mais um ótimo tutorial… não vejo a hora de começar a ler o livro que será lançado!!!
Ola,
queria fechar a tela que abriu somente quando clicar na opção fechar , não simplesmente clicando fora da tela.
como faço isso , fecahr a tela sem clicar fora da opção fechar….
BOA TARDE, GOSTARIA DE SABER COMO FAÇO PARA ABIR UM LINK ATRAVES DO MODAL EXEMPLO TENHI UMA TABELA DE PRODTUS E CADA UM TEM UM ID COM TEXTO E IMAGEM . COMO TRAZER O ID=2 ?? OU ID=5 . COMO FICA O LINK???
@Vinicius Guimarães:
Simples, é só retirar essa parte do código javascript descrita abaixo
//se div#mask for clicado.
$('#mask').click(function () {.
$(this).hide();.
$('.window').hide();
});.
});
@wesley:
Este é um tutorial passo-a-passo, você pode segui-lo copiando os códigos ou pode fazer o download localizado no topo da página e simplesmente modificar o (html)markup e css!
ok obrigado vou tentar. grato.
OLá Erik comentei a parte do script, mas no link como ficaria para chamar ??? assim? <a href="#dialog=” name=”modal”> , se for não esta rolando… E também tem o div não teria que que ficar dendro do loop para pegar o id que eu clicar?
Rogério,
O usuário “Erik” respondeu a pergunta do usuário “Ademir Bastiani”.
Eu tmb estou querendo saber como fazer para abrir um link dentro deste exemplo de modal.
Receio que com esse código não dá para fazer, a menos que seja reescrito. Se alguém tiver conhecimentos avançados na área e puder adapatar esse código, ficaríamos gratos.
Olá, primeiramente parabenizar pelo excelente trabalho de sempre. Acompanho o site, blog e livros, pois todos são de grande ajuda.
Minha dúvida é o seguinte; peguei 2 tutoriais daqui do blog esse da janela modal e o método load. Quis que, com esses dois, pudesse carregar páginas dentro de uma janela modal, mas o que ta acontecendo é que o conteudo da página (filho) pega a opacidade da janela modal (pai). Tanto div pai, quanto div filho estão com position:absolute. Pai z-index: 1 e filho z-index:2. Por favor se puder me dar uma dica do que estou fazendo errado, agradeço MUITO.
O link para teste é o seguinte: http://www.creatyve.com.br/teste_lightbox/
Olá…
Com o FACEBOX descobri q é possível abrir um link dentro de uma janela modal. É só seguir as instruções…..
Segue abaixo o link:
http://famspam.com/facebox
Boa sorte!!!!
Olá…
Vejam várias formas de implementação com o facebox que achei na web.
http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
Espero ter ajudado…
Ótimo tutorial.
Obrigado Maujor!!!!
Hnn… pegando o conteúdo do banco de dados, dá pra brincar bastannnnnte com isso ae, viu..
ótimo post, maujor..
[...] Artigo retirado do Blog do Maujor (Vale apena [...]
Olá Maujor… é um privilégio estar escrevendo para vc, pois considero vc um icone.
Estive lendo seu tutorial acima e me deparei com uma dúvida.
Acontece que deu 99% certo o resultado aqui, tirando apenas o fato de que usei para uma tela de notícias onde tenho várioosss links…se vc for no link (ultimo) la embaixo.. o modal abre no centro da tela… só q la em cima.
O modal abre no centro da tela sempre… mas nao no centro da tela apresentada.
Sabes me dizer como resolver?
se puderes me responde por email?
Obrigado.
Bom dia Maujor; É um prazer!
Gostaria de saber se é possivel a janela modal enviar informações para a janela “mãe”, ou seja, se eu colocar um botão de comprar na fanela modal é possivel carregar o carrinho de compras na janela principal ao inves de navegar na modal?
Um exemplo é o site fastshop.com.br, eles tem um Quick View, onde a modal carrega alguns dados do produto e tem o btn de comprar, quando clicado envia os dados para janela principal!
Aguardo e parabens pela iniciativa!!!
att
Fernando Web
Esse efeito era o que eu estava procurando para aplicar em meu projetos!
Como disse o Hugo logo acima, usando ele dinamicamente da pra brincar serio mesmo!!!
Parabéns Maujor!
ola Maujor estou com o mesmo problema do Anderson. Gostaria que a janela modal aparecesse no centro da tela apresentada. Se possívle envie a resposta por email ou um tópico para isso pois creio que possa existir mais alguem com esta duvida.
att