Janela modal com jQuery
Publicado em: 2009-04-16 — 506.993 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ões 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
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
Boa Noite, estou desenvolvendo um sistema de uma possivel lanchonete de comidas caseiras para fins academicos sou estudante da URI erechim, gostaria de saber e possivel usar esse modal dentro de um tabela para aumentar a foto do prato do meu cardapio.
muito interessante!!!
Eu alterei apenas o seletor #boxes .window de position:absolute para position:fixed. Dessa forma o dialog aparece sempre no centro da página.
Muito bom !!! Me ajudou bastante ! 🙂
Olá Maujor, seguinte a janela serviu muito bem, mas estou tendo o seguinte problema, quando tenho muito conteúdo para aparecer na janela não tem uma barra pra descer e quando eu tenho outra coisa ao lado de onde é pra aparecer a janela modal ela acaba indo atrás de um outro objeto (acaba ficando atrás de tudo)
Sugestões? 🙁
Maujor as últimas alterações resolveram, mas fica a dia, para testar mesmo só no servidor da internet. Foi publicar que funcionu tudo.
Obg.
Agora deu certo, em locahost não dá kkkkk Só par ame chamar de mentiroso kkkkkkkkkk
Eu não sabia que você tinha o minha página aí; veja que essa consulta foi de um terreno
que só tem uma foto, o máximo são 20 fotos. assim , quandoas outras são mostradas é que a
janela não consegue ignora-lás e pula acima da exibição, peguei outros exemplos e nada, acho que é bug mesmo. Veja em http://www.eugenioalves.com.br/tela1.jpg e tela2.jpg . Para ver o quadro são 3 janelas acima ….
Consegui alterar o local do link , mas a alteração não funcionou. Se conseguir aviso.
@Eugênio
Para o seletor .window altere position: relative; para position: absolute; e left:0;
Oi;
Funcionou perfeito, só que quando chamo a janela ela não aparece no centro da página que estiver, ela aparece na centralização da página no início. Muitas vezes a página fica escura mas a janela está lá em cima. A localização se ‘amarra’ no local anterior a exibição de várias fotos que vem antes do link … Deu para entender né ? Se não vai no meu site http://www.eugenioalves.com.br, clica em qualquer imóvel dos quadrinho e veja o link ” Contato para Proposta”, dá para notar o pulo que a página sofre.
Para mim não funcionou, talvez tenha faltado isso ” Não se esqueça de linkar para a biblioteca jQuery ao documento” que não sei onde colocar, alguém pode ajudar? Obrigado.
Olá Maujor,
Coloquei a janela modal em meu site…muito bacana, porém usei ela para mostrar vídeo e quando clico para fechar a janela, o áudio do vídeo continua. Poderia me orientar como fechar essa janela de forma que interrompa o áudio do vídeo?
Obrigado!
Olá fiz esse tutorial na minha pagina e ficou show de bola
Mas teria como incrementar a possibilidade de quando atualizar a pagina o modal não aparecer mais?
o cliente entra na pagina e fecha o modal, e não abre mais pra aquele cliente….
Olá!
Estou com uma dificuldade em passar parâmetros para a janela popup jquery. Existe essa possibilidade?
Fico no aguardo e já agradeço.
Boa tarde, e parabéns pelo Tutorial, esta sendo muito útil.
Mas estou com um probleminha:
Para cada dia da semana selecionado por um checkbox, preciso que abre uma janela modal diferente para preencher os horários disponíveis naquele dia.
Tentei fazer um javascript para cada dia da semana… porém não obtive sucesso…
Já esmaguei minha cabeça…
Poderia me ajudar.
Obrigado
Perfeito! Muito Pratico! *-* vlw maujor
Olá gente, ajudem-me por favor.
No meu caso eu tenho uma consulta que pode retornar várias linhas onde cada linha pode enviar a um link diferente, na verdade o link é o mesmo, só mudam os parâmetros. Hoje eu abro em janela popup simles e gostaria de transformar em modal.
O meu problema é carregar a div escondida na tela no caso de muitas linhas eu teria que ter um id exclusivo para cada linha e ainda assim carregar todos na tela escondidos.
Tem como eu abrir a modal como se fosse um comando JS window.open(link) ?
Depois que eu mudei para url amigavel, somente no index que funciona o modal, sabe me dizer o porque? As paginas estão funcionando normal, com a seguinte chamada :
localhost/meusite/cantato
Dai quando acessa a pagina contato, não funciona esse script seu, no index funciona.
Meu .htacces esta assim:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?pg=$1
Muito bom, parabéns Maujor, fiquei dias tentando entender que janela era essa, estava precisando dela, mas não sabia o nome, sabia que existia e que eu precisava aprendê-la, agora preciso aprender uma transição/animação em CSS3 para completar a minha ideia do uso dessa janela. Obrigada
Cara,gostei muito do site. Parabéns.
Mas,eu queria saber se tem como abrir uma página dentro do modal.
Parecendo os comentários,mas sendo uma página web. Tem como?
Olá,
Coloquei uma div para apresentar a mensagem de sucesso no corpo da modal quando insiro as informações no banco. Está funcionando perfeitamente. No entanto fica um grande espaço onde coloquei essa div, e os campos ficam deslocados do título da modal. Como faço para resolver isso?
Muito bom adorei, obrigado!!
Na minha “index.jsp” eu adicionei os códigos jquery, css e o html da janela modal.
Por algum motivo o atributo “display:none;” do css nao esta funcionando corretamente.
A “boxes” foi adicionada no final da minha pagina e fica aparecendo uma barra preta.
Eu tenho um arquivo de css para a minha página.
Existe algum atributo no css que anule o “display:none;” ?
Ótimo post, continue assim.
Parabéns.
Abraço.
Muito legal… Funciona certinho.
Alguma dica de utilização, caso o link que chama a janela estiver na parte inferior da página?
Maujor, você poderia remover a div mask do html, e então usar um $(body).append(”); no click action. Daria na mesma e deixaria o html mais limpo. xD
show de bola, só queria fazer o seguinte e não consegui: pegar os dados de um formulário e ao clicar aparecer dentro da janela modal. por exemplo, um formulário onde eu digito o nome, e quando clico no enviar, o nome que digitei (por POST) aparecerá na janela. teria como me ajudar nisso?
Como deixar o modal temporário?
Para o pop up ficar fixo (se o link for no final de uma página com rolagem por exemplo) coloque estes atributos nesta classe:
#boxes .window{
position:fixed; /*no lugar de absolute*/
top:40px !important;}
E para o flash ou vídeo ficar por baixo da película preta use ?wmode=transparent no final da utl do script. exemplo:
Estou a tentar modificar essa janela modal para utilizar em um site de apenas um página, acontece que o site tem apenas uma página e possui rolagem automática para os devidos links, e eu quero justamente
usar a janela modal em um dos links mas quando tento ela abre na parte inicial da página que é onde fica os links.
Alguem ja passou por isso e poderia compartilhar como arrumou uma solução?
Olá Maujor tudo bem?!
Estava inserindo a “Janela Modal” quando me deparei com um probleminha circunstancial:
Quando por exemplo eu abro a “Janela Modal” com o meu browser em um tamanho menor que o total do tamanho do meu monitor a “Janela Modal” mantém o tamanho anterior, ficando menor que o browser maximizado.
A minha duvida é como fazer para que a janela de adapte de forma automática nestas circunstâncias?
Obrigado!!!
abs!
Parabéns pelo seu trabalho.
Olá!
Muit bom, está de paranbéns, procurei muito uma forma de fazer isto e só encontrei por aqui!
Apenas uma dúvida, estou querendo fazer esta mascara apenas para o lado direito do site, deixando o menu de fora, porém quando altero o tamanho dela para ela não detectar automático a mnha #box não fica centralizada, como posso fazer isso?
Agradeço !!
e novamente parabéns!
Bom, eu não sou muito de comentar, mas você merece parabéns. Me ajudou muito. Valeu
Prezado, bom ali eu percei que para abrir esta janela tem que clicar em um botão, mas tem como abrir ela quando iniciar o site? Assim disparando automaticamente sem clicar e só fechar quando clicar no botão?
Abraços, acompanho sempre este blogo e cada dia aprendo mais.
Olá Maujor ou quem puder ajudar
Estou tentando adaptar essa janela modal as minhas necessidades em PHP.
Tenho um link dinâmico que ao ser clicado manda o codigo de uma tabela para a URL: href=index.php?cod=”$codigo.
Gostaria que através desse código fosse mostrado o conteúdo da tabela na janela modal. Já tentei das seguintes maneiras:
href=index.php#dialog?cod=
href=index.php?cod=”.$ls->getCodigo(). “#dialog>”
href=index.php?cod#dialog=”.$ls->getCodigo()
Mas nenhuma abre a janela modal corretamente. Seria possível me mostrar como resolver esse problema. Desde já agradeço a atenção
[…] Fonte: www.maujor.com […]
Li o comentário do pessoal falando sobre o uso de plugins, bom, no meu caso foi muito mais prático usar essa janela, até pq o plugin não funcionava de forma alguma ! Para determinadas situações, vc usar algo simples mas que vc mesmo fez é muito mais satifatório, do que ficar se matando para fazer um plugin funcionar !
Bom dia….o tutorial eh fantástico.
Tenho só uma dúvida….consigo fazer com que essa janela em pop up carregue junto com a página sem ter que clicar em nada?
obrigado
Como colocar uma barra de rolagem??? socorrooo
Oi como chamo a id dentro de um echo no php?
obrigado
Muito bom o tuto, obrigado por compartilhar.
Parabéns, conteúdo de qualidade!
Sinceramente, achei grande demais este script, basta usar o Jquery UI Widgt que, com apenas algumas linhas de código, é possível criar uma excelente janela modal, com vários efeitos e de ótima performance.
Veja o sódigo abaixo, bem mai simples do que o que foi publicado, e facílimo de e implementar:
$(“#login”).dialog({ bgiframe: true,width:300,height: 140,modal: true,autoOpen: false,resizable: false});
$(“#login”).dialog(“open”);
Faça login aqui
Para implementar basta usar a bblioteca JQuery e o JQueryUI , que pode ser baixado facilmente no mesmo site do JQuery. As cores da janela modal ão de acordo com o tema que você escolher no JQuery UI. Bem mais prático e rápido, do que estas inumeras linhas
Aqui aponta erro no Javascript, pode concertar?
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.
Gostaria de saber como faço para colocar esse modal em uma pagina.html separada e chamar ele através de um link em outras paginas, ou seja para não precisar fazer o modal novamente, e sim conter varias chamadas.
Fico no aguardo
###################### ASP.NET #################
######################## JQUERY ##############
$(“.detalhes”).click(function() {
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”, 0.8);
$(this).children(“#detalhesUC”).fadeIn(2000);
});
//se o botãoo fechar for clicado
$(‘.window .close’).click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();
$(‘#mask, #detalhesUC’).hide();
});
//se div#mask for clicado
$(‘#mask’).click(function() {
$(this).hide();
$(‘#detalhesUC’).hide();
});
#################### CSS ################
.detalhes-uc
{
position: fixed;
width: 600px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -150px;
background-color: white;
z-index: 99999;
}
#mask
{
/*position: absolute;
z-index: 9000;
background-color: #000;
display: none;*/
display: none;
background: url(../images/008.png) repeat;
position: fixed;
width: 100%;
height: 200%;
z-index: 9999;
top:0;
left:0;
}
#boxes .window
{
position: fixed;
width: 600px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -150px;
background-color: gray;
z-index: 99999;
display:none;
}
/* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */
#boxes #dialog
{
width: 375px;
height: 203px;
}
.close
{
display: block;
text-align: right;
}
tem como acessar 3 paginas, obviamente uma após a outra dentro da mesma janela modal?
Exemplo:
Pagina 1 – tenho o formulario de cadastro;
Pagina 2 – a confirmação dos dados do formulario;
Pagina 3 – o envio dos dados e a mensagem q foi efetuado com sucesso.
O usuario clica no link para fazer o cadastro ai abre a janela modal, ele preenche os dados e clica para confirmar os dados digitados, nessa mesma janela modal eu gostaria q aparecesse o formulario com as informações e caso esteja tudo ok ele clica pra enviar e ai aparece a mensagem de sucesso, tudo na mesma janela modal.
Maujor.
So estou com uma duvida.
Criei um exemplo com dois formularios modais no asp net sendo chamados cada botão um formulario.
No primeiro aparece mas quando chamdo o segundo não aparece e da esse erro “” Erro em tempo de execução do Microsoft JScript: Exceção descartada e não detectada””
[…] Janela modal com jQuery | Blog do Maujor […]
Legal mas isso não é modal… Modal não deixa o usuario sair da janela sem executar a ação. isso ai é apenas um dialog, não modal.
Eu sempre acho explicações e tutoriais de como fazer com a opção onclick, mas eu realmente nao acho quando se trata como acontece em sites como groupon, que ao carregar a página o box entra, teria como voce me dizer ou passar uma dica de como fazer assim?
Rpaz utilizei seu script mas ao coloca-lo no navagador ficam aparecendo parenteses abaixo dos link mostrando o nome dos arquivos
EX.: (#dialog2) será que pode ser alguma incompatibilidade com o framework css que estou usando ?
Att,
[…] artigo foi “baseado” no do imortal Maujor janela, Java, JQuery, modal Posts Relacionados:Menu Sanfona com JQueryAnimando com JQueryCSS […]
sensacional!!!! estava a procura disso.
Obrigao
Passando so para agradecer ^.^
Este código dá problema quando redimencionamos o navegador. Para resolver comentem as linhas abaixo:
// 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ões da tela
// $(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});
e mudem o css para:
#mask {position:absolute;
z-index:9000;
background-color:#000;
top:0;
left:0;
width: 100%;
height: 100%;
display:none;
}
Tenho uma lista de emails num HTML, gostaria que, ao clicar no link do email, a janela Modal abrisse e a msg do formulario fosse enviada para o email clicado, como seria?
Gostaria de saber como que eu faço para deixar a div do dialogo (da modal) externo no meu código, não quero deixar tudo junto, quero puxar de um outro arquivo html, como posso fazer?
Pq nao usar iframe? Nao posso mudar a estrutura do sistema. Trata se de um sistema web de uso interno. Como um painel de configuracao. Deve haver uma maneira de escurecer toda a tela…
Michell, não use iFrame.
Consegui acionar a modal a partir do iframe filho.
Porém, surgiu outro impasse: a area que escure o fundo preenche somente o iframe filho.
É possível preencher toda a tela e cobrir todos os elementos html?
Olá.
Estou tentando chamar a função clicando num botao dentro de um iframe. Porem a função não é acionada.
Como faço para utilizar com iframes?
Estou com uma dúvida 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?
Boa Tarde tentei usar o efeito da janela modal mas o flash que tenho no meu site sobrepõem a mesma. Alguém poderia me ajudar?
Obrigado
Estou com dúvidas para alinhar meu modal , eu fiz tudo certo ele funcionou mas fica para o lado direito , quero alinha-lo aonde eu quiser com os atributos left: e top: mas não estou conseguindo
Boa tarde,
O exemplo é realmente muito bom mesmo parabéns, mas para meu projeto gostaria de colocar está janela modal dentro de um jquery Toggle. pois ate consigo colocar mais o efeito da janela modal não aparece na imagem.
Aguardo por uma resposta.
Muito obrigado mestre por esse tuto já fazia tempo que estava procurando por uma coisa assim.
Muito bom o seu post.
Parabéns.
Porém estou também com o mesmo problema que vi alguns relatando.
Precisaria que a janela fosse aberta no centro da tela, tando horizontal como verticalmente.
Se puderes, envia por mail como solucionar. Grande abraço.
Oi Pessoal,
Postei no meu blog, uma implementação simples para que o modal deste tutorial, se abra no onload do documento.
http://wbruno.com.br/blog/2011/11/22/abrir-modal-tuto-maujor-automaticamente-ao-carregar-pagina-jquery/
Espero ter contribuido.
[]s!
Ai meu PARABEEENS, esse post salvo meu emprego em tempo recorde !
muito bom eim !
Valeww
Olá,
Tentei o exemplo também do Jorge Lima,
sem sucesso…
Olá Julio Bernardo,
Tentei o seu exemplo para carregar
a modal iniciando com a página e não funcionou.
Alguém tem algum exemplo da modal carregando no inicio da página
sem o uso de botão.
Obrigada Carol
só queria saber se tem como abrir a janela modal ao abrir o site
Parabéns pela iniciativa de postar um trabalho excelente.
Porém preciso de uma informação, como posso cancelar o esc e o clique no mascára para que não sai com o clique e sim no fechar.
Desde já agradeço.
Legal, implementa agora o drag do modal. Abraços.
Muito bom!!! funcionou perfeitamente! parabéns….
[…] solução prática, rápida, simples e boa para fazer um lightbox é o lightbox do Maujor, principalmente para quem não quer colocar algum plugin jquery no […]
Parabéns pelos excelentes tutoriais!
Sou sua fã!
Aliás, aprendi com vc a usar o CSS. Estou engatinhando, mas a cda dia aprendendo e buscando mais e seu blog é fonte obrigatória de pesquisa. =)
Usei o exemplo acima. Gostaria de saber se tem como após carregar a modal no body onload(), deixar o foco para o campo usuário (estou usando o modal com caixa de diálogo) ?
Desde já agradeço!
Simplesmente sensacional, muito bacana e prático o seu método de ensino, mas alguém poderia me dizer como fazer para colocar em um input, tipo, quando eu clicar em um botao input abrir o modal?
Tem como ela abrir quando abrir o site?
Estou passando um mal bocado tentando centralizar a janela popup.
O código exemplo não está funcionando neste caso específico.
Gostaria de pedir ajuda nesta questão.
Obrigado.
Parabens!
Estou com um problema, deve ser simples, mas!!!…
Se o link estiver no fim da página, ao clicar ele abre o div no inicio, dai tenho que rolar a tela para cima para visualizar…
Tem como o DIV abrir, independente da localização que eu esteja na página?
Abraços.
Parabens pela dica, usei e ficou perfeito.
Oi Maujor,
È o seguinte, eu adaptei esse “plug” pro meu site, o que acontece é que nem o fundo escuro aparece e quando aparace a janela modal a tela horizontalmente e verticalmente se estica um pouco, embora com espaço em branco, alguma ideia sobre o que seja isso???
Abraço.
Mestre! Não agradeço somente por este tutorial didático e prático, mas sim, por todas as verdadeiras aulas que o senhor tem dado durantes esses anos todos, as quais tenho me dedicado a aprender . Seus tutoriais me possibilitaram melhorar minha colocação profissional, na disponibilização de resultados na web.
Vida longa ao Dinossauro! Rsrsrs.
A parte final da chamada no onLoad do meu comentário acima foi barrada na hora que enviei o comentário. Mas é só chamar no onLoad do Body passando o nome da dialog na função.
Ex: ChamaNoLog(‘#dialog’);
ou ChamaNoLog(‘#dialog1’);
ou: ChamaNoLog(‘#dialog2’);
Eu fiz diferente pra abrir no onLoad, olhem só:
Criei uma function com quase tudo que já existia, tirando umas linhas e incluindo, as duas seguintes:
var id = this && tipo;
$(tipo).show();
E ficou assim:
function ChamaNoLog(tipo)
{
var id = this && tipo;
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”,0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css(‘top’, winH/2-$(id).height()/2);
$(id).css(‘left’, winW/2-$(id).width()/2);
$(id).fadeIn(2000);
$(tipo).show();
}
e chamo no onLoad assim:
ou
ou
Acho que ficou mais simples de entender.
Olá thiago não tenho certeza mais provavelmente esse alert e do navegador no caso das configurações do mesmo so e altera a configuração e pronto..
adorei, estou começando aprender agora sobre isso e era isso que eu procurava! super simples me ajudou muito! Obrigada^^!
Excelente tutorial e bem fácil de se entender apliquei aqui e deu tudo certinho, porém posso ter uam dúvida ?
A janela modal se aplicaria para um form de cadastro por exemplo ?
por ex, tenho minha lista de users quero clicar em um deles para editar, e janela modal seria meu form de edição, como eu passaria o id do cara pelo link ???
E como eu receberia isso dentro da janela modal ?
tem lógica ou estou viajando ? alguém aí.
Abs
Oi, pode me ajudar?
Gostaria que a modal simples abrisse ao carregar a página!
como mudo para onload?
Como faço para carregar a janela modal junto com a pagina(sem botao para clicar).
Obrigado
Cara, consegui! É muito fácil fazer isso.
Quando clico no link aparece um alert antes, como posso retira-lo?
Amigo, estou com um problema.
Quando executo o modalm eu faço com que execute um Iframe para contendo um vídeo com música de fundo. Porém quando clico em fechar a janela some mas o som continua, ou seja o vídeo continua executando mas invisivel, teria alguma rotina que ao clicar no botão fechar, possa encerrar o iframe? Todas que usei, encerra o iframe porem quando clico no link para o video a tela somente escurece mas o vídeo não inicia. Se puder me ajudar, obrigado.
Ola brothers.
Tipow show de bola o tuto, porem estou com um problema para fazer uma simples implementacao..
Eu presiso que tipow ao abrir a pagina ele já carregue a janela dialog1 por exemplo..
Ou seja é como se alguem tivece clicado no link, porém isso acontece altomaticamente ja ao carregar a pagina…
Alguem poderia me dar um HELP.. tentei bastante mas nada funfou ate agora
Não consigo abrir a janela modal no IE, existe alguma configuração?
Oi, adorei o tutorial, foi muito util pra mim. Mas eu gostaria de saber uma coisa…
Se eu quiser colocar outra imagem ( e ir a próxima imagem) qual código eu coloco?
eu tentei arrumar, mas não consegui. então deixei só uma imagem..
voce poderia me ajudar?
Desde já agradeço 🙂
Olá a todos!
Gostaria de saber se alguém pode ajudar-me com um problema,, acredito que o mesmo seja de simples solução, mas como não sei resolve-lo, recorri a ajuda de vocês.
Estou utilizando um formulário de contato dentro da Janela Modal, porém este formulário tem validação em PHP, a validação retorna se o formulário esta “OK” ou “NÃO” após a submissão do formulário, meu problema esta justamente aí, quando o usuário envia o formulário se ele estiver preenchido os campos corretamente ele é redirecionado para uma página de confirmação, e CASO a validação dele NÃO esteje “OK” ao clicar em submit, simplesmente a Janela Modal fecha, dando a sensação de ter enviado o formulário com sucesso quando na verdade houve um problema.
Alguem sabe como posso resolver?
Desculpem-me pelo “livro”, pois tentei ser o mais específico possível afim de obter ajuda.
Agradeço a Todos e ao Majour pelo conteúdo traduzido para nossa língua.
ninguém?
Maujor.. essa solução me ajudou muito num projeto que estou desenvolvendo…
tive que adaptar pra receber páginas externas dinamicamente… mas a ideia é praticamente a mesma..
único problema que encontrei nessa sua solução é que, se a página for grande (em altura)… e a chamada para a janela modal estiver no final da página, ao requisitar a janela modal ela irá aparecer no topo da página.. pois no CSS foi definida sua posição como Relative…
Aí tive que adaptar essa parte também.. colocando a posição da div.window como fixed…
Bom.. testei no FF, IE, Chrome… e está tudo Ok…
Valeu aí pela dica..
Excelente topico…
estou trabalhando com ASP.NET e deparei num problema.. ja que sou ainda um Lammer em jQ… gostaria de saber se tem como disparar o Modal quando um updateProgress fosse executado…
ou seja….
Quando um processo é disparado esse UpdtProgress abre e mostra seu conteúdo… eu queria que ao invés desse conteúdo aparecesse o modal… e ao final… quando o UPDT ficar Hided o Modal… sumir tb…
se puder me ajudar agradeço imensamente.
Excelente tópico, consegui fazer funcionar através dele, respondendo a pergunta de alguns, para deixar a janela como modal, basta apagar essa parte do código em javascript.
$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});
});
Essa parte do código que faz com que quando clicado fora da área do modal ele volte a tela principal, excluíndo ela temos um modal pop up.
Valeu, excelente tutorial.
Abs
Julio Bernardo
eu consegui, vc já resolveu a questão?
Olá tenho uma dúvida.
Carrego uma pagina dentro do modal, nesta pagina contem links para direcionar para outra pagina. Gostaria de saber com configurar para que pudesse carregar outra pagina no modal com ele aberto e voltar para pagina anterior. Grato
[…] digitados, cadastrar um novo registro e recarregar um combo para mostrá-lo. Fácil! Coloco uma janela Modal, abro num efeito pra deixar o usuário de boca aberta, executo o cadastro e volto para a página […]
Olá Maujor o meu funcionau em uma pagina simples se eu coloco ele em uma página que contem um light-box (galeria de fotos) ele não está funcionando.
Desde já agradeço
[…] 16-4-2009: – If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor […]
Olá Maujor, Me diz só uma coisa: Por que tem esse “” ai na linha 21 se tem outro fechamento dessa tag na linha 28? Esse código não dá certo de jeito nenhum cara.
Ola, Gostei do tuto e esta funcionando legal…porem…houve um problema aqui que espero ser resolvido…
Minha pagina tem uma barra de rolagem e coloquei um link pra janela modal la em baixo só que a janela abre la em cima..fica tudo escuro e a janela nao aparece… dai tenho que rolar pra cima pra poder ve-la…
Agora!.. Como faze-la aparecer ao lado do meu link….ou fazer a tela rolar automaticamente la pra cima…
tem alguma solução pra eu??
Obrigado!
Maujor, achei interessante seu tutorial, desenvolvo em asp.net e tenho um gridview onde defino uma coluna como hiperlink onde passo via javascript para abrir um popup, queria mudar isso para abrir uma janela modal então usando as dicas do seu tutorial como eu faria nesse caso ?
Estou enviando aqui o comando que passo no select para dar o bind no gridview
‘‘ + convert(varchar,u.nome) + ‘‘ As Nome, “
O problema e o arquivo prototype.js o qual faz definicoes do windows e document, talvez nao de para usar os 2 juntos entao nao e?
Maujor, parabéns por compartilhar seu conhecimento desta maneira.
Este codigo resolveu meu problema, pois necessitava carregar texto em um light box em vez de imagem.
Porem estou com um problema, preciso usa-lo em uma pagina junto com o light box e algum evento esta dando conflito com o light box. Se uso separadamente ambos funcionam normalmente, mas quando importo os 2 codigos na mesma pagina a janela modal nao funciona!
Fiz alguns testes e nao consegui identificar o que esta dando conflito entre os codigos, voce saberia me dizer qual e o problema?
Muito obrigado!
Parabens novamente.
Abracos
Desculpem a todos se esta questão já foi tratada, mas busquei nos comentários (que não são poucos diga-se de passagem) e encontrei uma pessoa com a mesma dúvida minha, só que não vi a resposta.
Usei esta janela para trazer um textfield que servirá para atualizar o email no banco, agora não consigo fazer com que ao enviar o form e fechar a div modal dar um refresh na pagina principal? Alguém encontrou a solução?
No mais parabéns pelo post, excelente !!!
Se não sabe como usar onbeforeunload com a janela modal, é só responder. Ninguém é obrigado a saber tudo, apesar de existir aqueles que pensam que sabem.
Olá, Maujor! Você pode dar uma dica de como utilizar a janela modal que você demonstrou com a função onbeforeunload? Como chamar a janela model com tal função? Para mim, mostrar a janela basta, sem as opções de “ok” e “cancelar”. Quero, quando estiver numa sessão, que apareça a janela apenas para dizer que o usuário deve fechar a sessão e não fechar o navegador. Ocorre que o navegador Opera, por exemplo, na sua caixa de diálogo javascript, possui um campo para desabilitar os scripts, e se utilizar a janela modal, esse campo não aparece. Se puder, dê uma dica, por favor. Um abraço, Antonio.
O código é legal, o efeito é legal, mas não tem nada de modal nessa janela. Ela apenas aparece por cima da outra janela e quando alguem clica em alguma parte da tela, mesmo em outro programa, a tal janela modal desaprece. janela modal é aquela que impede o acesso aos outros objetos enquanto ela estiver ativa.
Como fazer para que ela seja modal de verdade ???????????
Parabéns Maujor!!!! Hoje seu trabalho é muito acessado pelos que se interessam por css e html…. parabéns pela sua iniciativa de ensinar e publicar seus conhecimentos.
Prezado Maujor, parabéns pelo trabalho. Acabei de ler seu livro, construindo sites com X HTML e gostei muito. Mas não podemos considerar estes exemplos como janelas modais, pois elas permitem o seu fechamento interagindo com a principal. Como colocar a obrigatóriedade de fechamento dentro da propria janela que se abriu? Abraço
Maujor parabéns pelo trabalho
Estou fazendo uma adaptação em um site e gostaria de usar a janela modal em um link no rodapé, mas a janela abre no topo.Tem como fazer sempre centralizada na pagina
Grande abraço
ola, eu preciso carregar o conteudo do meu sistema dentro de uma DIV, mas so os link que tenham form_action=ask-edit na URL
a href='card.php?form_action=ask-edit'Se clicar em editar carregar o conteudo da pagina card.php dentro de uma div no centro, e o fundo escurecer.
Execelente, logo vou comprar o livro!!!
Olá tudo bem? Estou tentando utilizar essa janela modal no menu principal do site. A pessoa clica e puxa uma pagina em HTML em branco mesmo, so com o texto e fotos, isso é possivel?
Me de uma luz por favor. Obrigado pela atenção
Gostaria de deixar o href da seguinte forma abaixo
Que que eu tenho que alterar ?!
Primeiramente parabéns pelo tutorial excelente 😀
Mais assim como várias outras pessoas tenho dúvidas como irei descrever abaixo:
Meu problema é o seguinte, tenho um formulário de pesquisa onde listo os clientes cadastrados, e tem algumas operações como Altera – Excluir – +Detalhes.
Quando eu clicasse em Excluir então gostaria que me aparecesse na janela modal a pessoa que eu desejo “Excluir”, ou seja, pegar o seu ID do banco de dados (MySQL) para mim confirmar ou cancelar a operação.
Mais eu reparei que ela só abre de o “href” ficar assim –>> href=”#dialog2″; <> href =””> <<– .. como pode ver, pegando o ID de quem eu desejo excluir.
Mais se eu deixar o link dessa forma que falei ela não abre. Sabes me dizer o que que tenho que modificar para ela ficar com a funcionalidade que desejo ?!
Legal pessoal!
A transformação do codigo para se abrir no onload da pagina foi um sucesso, pelo menos para mim…
Mas, vai uma perguntinha facil pra galera que manja aii bastante de JavaScript
Como eu bloqueio o modal, por exemplo emquanto a pessoa não clicar em fechar no modal ela não faz nada, por que o codigo até agora se eu clicar fora da janelinha que se abre, o modal some…
Valeww abraço…
tem como maximizar essa tela algum atributo para fazer isso
Muito bom o artigo, mas gostaria desaber se é possível fazer com que uma modal abra outra?
Pois gostaria de abrir uma modal igual a “Janela Modal Simples” dos exemplos e com um botão na modal chamar outra por cima.
Agradeço desde já.
Estou com um problema.
Tenho uma tela principal com 3 frames. O frame central chama a janela modal.
So que ela não preenche a tela inteira, apenas a frame em que foi chamado.
Gostaria de preencher a tela inteira. Alguém pode me ajudar?
Muito bom, a caixa de login e de carregar ficou show.
Parabéns pelo trabalho.
Como sempre demais. E muito funcional
Muito bom esse lightbox. Mas preciso de uma ajuda como faço para carregar uma pagina html nessa janela ? alguem poderia ajudar ? mandando pelo menos um link que tenha o codigo “todo”.
obrigado.
Gervasio
Não é parecido não, É IGUAL, pois trata-se de uma tradução com a devida permissão do autor Kevin e créditos no final da matéria.
Antes de postar bobagens leia a matéria toda.
Nota: Ia te responder por mensagem privada, mas você forneceu um email inexistente portanto vai publicamente mesmo.
Bem parecido com esse tutorial aqui: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Não acha, Kevin?
Olá Maujor,
muito interessante esse efeito, está ajudando muita gente, mas eu tenho uma dúvida, como criar uma janela modal com aquele efeito drag and drop pra mover ela por toda tela?
Obrigado
Muito bom mesmo…parabens!!
Será que alguma alma caridosa pode criar um HTML simples, apenas com a função que chama a janela modal ao acessar uma página HTML?
Li o exemplo acima, mas infelizmente não tive conhecimento suficiente para poder implantá-lo.
Obrigado!
Olá, muito bom tutorial.
Vejo que eu, e muitas pessoas ainda tem a duvida de como carregar esta janela modal pelo flash,
Isso nao funciona dessa forma:
on (press) {
getURL(“#dialog1”, “modal”);
}
Acredito que tenha que ser por uma funcao de javascript
alguem tem uma solucao para isso?
Abs!
Para abrir o modal no onload da página:
$(document).ready(function() {
//Put in the DIV id you want to display
launchWindow(‘#dialog’);
//if close button is clicked
$(‘.window .close’).click(function (e) {
e.preventDefault();
$(‘#mask’).hide();
$(‘.window’).hide();
});
//if mask is clicked
$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});
});
function launchWindow(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());
$(id).css(‘left’, winW/2-$(id).width()/2);*/
//transition effect
$(id).fadeIn(2000);
}
Corrigindo… lutando há dias hehehe… errinho básico 😐
Não quero ser chato não rsrs, mas não consegui resolver meu problema. Toda vez que a janela modal aparece, o banner flash que deveria estar atrás, sobrepõe a janela modal e dá um efeito ridículo e muito indesejado. Alguém tem alguma idéia? Estou lutando a dias pra resolver isso. 🙁
Obrigado pelo tutorial. Parabéns.
Ola Maujor, parabéns pelos tutoriais, vc tem me ajudado muito, mas to com um problema, até agora não consegui fazer o modal funcionar quando uso o jquery.scrollTo-1.4.2-min, o efeito aqui me guia pela pagina ate a div selecionada. Que tentei de varias formas, ate mecher no javascript q fica na pagina, mas não funciona. Se poder revisar o codigo seria muita gentileza da sua parte. Obrigado.
Mesmo problema do Julio!
Help!!!
Legal! 🙂 Será alguém tiver alguma idéia de como ajudar-me com o problema acima, agradeço minha gente. Pior que nesse meu caso, acho que não tem jeito. 🙁
Muito bom, vou testar
obrigado
att, Luiz
Parabens … como sempre nos surpreendendo.
Corrigindo, vc precisa de uma função englobando o código acima e pôr no onload do body a chamada.
Abraços
Respondendo a pergunta do amigo (Luiz Antonio) acima, dá sim. Eu fiz um banner modal da seguinte forma:
comentei a funcao click e então ela agora ‘starta’ sem a necessidade de click do mouse, mas sim toda vez que damos refresh na página. Também adicionei a linha (“#dialog”).show pra mostrar de cara a dialog. Olha como ficou:
// $(‘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(1000);
$(‘#mask’).fadeTo(“slow”,0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css(‘top’, winH/2-$(id).height()/2);
$(id).css(‘left’, winW/2-$(id).width()/2);
$(id).fadeIn(2000);
$(‘#dialog’).show();
// });
Olá Maujor. Primeiramente, parabéns pelo tutorial. Excelente! Diante disso, consegui fazer um banner modal no onload da página. Obrigado! O único problema Maujor, é que eu tenho um banner rotativo em flash na minha página, quase no topo, e quando acontece o onload, o dialog modal faz seu papel, porém o flash fica por cima do modal, estragando todo o efeito. Já tentei usar z-index, mas sem sucesso. Como estou usando a tag object pra inserir o flash, não sei se funcionaria também. Você tem alguma idéia?
Obrigado mais uma vez.
Abraços
Olá Maujor, parabéns pelo script ficou muito bom, utilizo demais modal em meus sistemas.
Gostaria de saber se a possibilidade de quando entrar na página, carregar um modal tipo o de login sem ter que clicar em nada?
Explicando > a pessoa entra na pagina e se depara com um modal de login.
um exemplo não sei se é possivel mas tipo assim…
<body onload="dialog()"…
se tiver alguma forma de fazer isso, porque eu tentei aqui e confesso que não consegui.
Grato.
Bom dia Maujor. Gostaria de saber se com esse script é possível abrir no box da janela modal um arquivo html externo.
Obrigado.
Olá Maujor. Parabéns pelo script. Ficou excelente. Porém estou com o mesmo problema do Gustavo: o posicionamento da janela modal inicia de acordo com a minha div principal. Gostaria que o inicio fosse de acordo com a janela(body).
[…] Janela modal com jQuery | Blog do Maujor – […]
Maujor, parabéns pelo script, mais gostaria de saber como faço para carregar essa janela modal na abertura do site ou toda vez que a minha pagina home, for carregada?
valeu!
Maujor, sensacional esse script do modal com o Jquery, estava precisando muito de algo assim!
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
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!
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
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.
[…] Artigo retirado do Blog do Maujor (Vale apena […]
Hnn… pegando o conteúdo do banco de dados, dá pra brincar bastannnnnte com isso ae, viu..
ótimo post, maujor..
Ótimo tutorial.
Obrigado Maujor!!!!
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…
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á, 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/
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á 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?
ok obrigado vou tentar. grato.
@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!
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???
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….
Maujor,
Parabéns por mais um ótimo tutorial… não vejo a hora de começar a ler o livro que será lançado!!!
Sou novo no java, tem como me enviar passo a passo para a produção desse java. Obrigado.
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!!!
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.
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.
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….
Adorei o seu blog.
@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
@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
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.
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.
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???
muito interessante
[…] 16-4-2009: – If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor […]
muito boa a matéria
Já utilizo JQuery em algumas aplicações.
Sou fã incondicional da biblioteca.
Parabéns pelo blog!
Um ótimo lugar para aprender mais!
Ótimo tutorial. Parabéns.
Olá pessoal, alguem saberia me orientar como chamar essa janela, atravez de um botao em flash poderia ser tanto ActionScript 2 ou 3.
É 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+
Consegui fazer funcionar como eu queria, por favor testem para ver se ficou bom. Valeu!
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
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.
Parabéns. Otima explicação
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
@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>
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
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!
Excelente o turorial……………com certeza vai auxiliar muita gente
muito bom tutorial maujor, utilizo muito janelas modal em meus projetos…
@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?
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.
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! 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