Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Janela modal com jQuery

Publicado em: 2009-04-16 — 507.146 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 🙂


Demonstração Download


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 atributo name="modal" e a ele(s) atribuir o evento click para disparar a ação de mostrar, em uma janela modal, o conteúdo do div cujo id é definido no atributo href do 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.

Demonstração Download

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.

209 comentários na matéria: “Janela modal com jQuery”

  1. Luis Felipe ZorteaNo Gravatar disse:

    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.

  2. moda plus size goianiaNo Gravatar disse:

    muito interessante!!!

  3. Paulo GomesNo Gravatar disse:

    Eu alterei apenas o seletor #boxes .window de position:absolute para position:fixed. Dessa forma o dialog aparece sempre no centro da página.

  4. JanaínaNo Gravatar disse:

    Muito bom !!! Me ajudou bastante ! 🙂

  5. VitorNo Gravatar disse:

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

  6. EugenioNo Gravatar disse:

    Maujor as últimas alterações resolveram, mas fica a dia, para testar mesmo só no servidor da internet. Foi publicar que funcionu tudo.

    Obg.

  7. EugenioNo Gravatar disse:

    Agora deu certo, em locahost não dá kkkkk Só par ame chamar de mentiroso kkkkkkkkkk

  8. EugenioNo Gravatar disse:

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

  9. EugenioNo Gravatar disse:

    Consegui alterar o local do link , mas a alteração não funcionou. Se conseguir aviso.

  10. MaujorNo Gravatar disse:

    @Eugênio
    Para o seletor .window altere position: relative; para position: absolute; e left:0;

  11. EugenioNo Gravatar disse:

    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.

  12. LaercioNo Gravatar disse:

    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.

  13. NavarroNo Gravatar disse:

    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!

  14. brunoNo Gravatar disse:

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

  15. Luiz CladuioNo Gravatar disse:

    Olá!
    Estou com uma dificuldade em passar parâmetros para a janela popup jquery. Existe essa possibilidade?
    Fico no aguardo e já agradeço.

  16. DavidsonNo Gravatar disse:

    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

  17. Gabriel SalesNo Gravatar disse:

    Perfeito! Muito Pratico! *-* vlw maujor

  18. Jorge SilvaNo Gravatar disse:

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

  19. Marcos MartinsNo Gravatar disse:

    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

  20. CarolNo Gravatar disse:

    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

  21. HenriqueNo Gravatar disse:

    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?

  22. Lucas LeonardoNo Gravatar disse:

    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?

  23. ganhar mais curtidasNo Gravatar disse:

    Muito bom adorei, obrigado!!

  24. ThiagoNo Gravatar disse:

    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;” ?

  25. SantosNo Gravatar disse:

    Ótimo post, continue assim.

    Parabéns.

    Abraço.

  26. ArturNo Gravatar disse:

    Muito legal… Funciona certinho.

    Alguma dica de utilização, caso o link que chama a janela estiver na parte inferior da página?

  27. Kennedy SilvaNo Gravatar disse:

    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

  28. LiherbertNo Gravatar disse:

    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?

  29. TamaraNo Gravatar disse:

    Como deixar o modal temporário?

  30. JoyceNo Gravatar disse:

    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:

  31. ElisangelaNo Gravatar disse:

    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?

  32. Luiz FernandoNo Gravatar disse:

    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!

  33. AllanNo Gravatar disse:

    Parabéns pelo seu trabalho.

  34. EduardoNo Gravatar disse:

    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!

  35. LaisNo Gravatar disse:

    Bom, eu não sou muito de comentar, mas você merece parabéns. Me ajudou muito. Valeu

  36. FernandoNo Gravatar disse:

    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.

  37. Edson RodriguesNo Gravatar disse:

    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

  38. Janela modal com jQuery - Matheus Piscioneri disse:

    […] Fonte: www.maujor.com […]

  39. Robson BarretoNo Gravatar disse:

    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 !

  40. FernandoNo Gravatar disse:

    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

  41. MayconNo Gravatar disse:

    Como colocar uma barra de rolagem??? socorrooo

  42. Renato FreitasNo Gravatar disse:

    Oi como chamo a id dentro de um echo no php?
    obrigado

  43. DjalmaNo Gravatar disse:

    Muito bom o tuto, obrigado por compartilhar.

  44. Diego SampaioNo Gravatar disse:

    Parabéns, conteúdo de qualidade!

  45. LeonardoNo Gravatar disse:

    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

  46. Matheus MNo Gravatar disse:

    Aqui aponta erro no Javascript, pode concertar?

  47. MoskaNo Gravatar disse:

    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.

  48. EduardoNo Gravatar disse:

    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

  49. Pedro TerreCoNo Gravatar disse:

    ###################### 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;
    }

  50. SaraNo Gravatar disse:

    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.

  51. MarcosNo Gravatar disse:

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

  52. Janela modal com jQuery | Blog do Maujor » Web Design disse:

    […] Janela modal com jQuery | Blog do Maujor […]

  53. DiogoNo Gravatar disse:

    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.

  54. silvio fischerNo Gravatar disse:

    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?

  55. Paulo Roberto BolsanelloNo Gravatar disse:

    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,

  56. Criando uma janela modal simples com jQuery | Boteco Digital disse:

    […] artigo foi “baseado” no do imortal Maujor janela, Java, JQuery, modal Posts Relacionados:Menu Sanfona com JQueryAnimando com JQueryCSS […]

  57. FelipeNo Gravatar disse:

    sensacional!!!! estava a procura disso.
    Obrigao

  58. José MariaNo Gravatar disse:

    Passando so para agradecer ^.^

  59. Jean PatrickNo Gravatar disse:

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

  60. ViniciusNo Gravatar disse:

    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?

  61. AlebertoNo Gravatar disse:

    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?

  62. MichellNo Gravatar disse:

    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…

  63. robertoNo Gravatar disse:

    Michell, não use iFrame.

  64. MichellNo Gravatar disse:

    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?

  65. MichellNo Gravatar disse:

    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?

  66. Sidônio RaftopoulosNo Gravatar disse:

    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?

  67. Pedro MaiaNo Gravatar disse:

    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

  68. IgorNo Gravatar disse:

    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

  69. Eduardo Leandro AlvesNo Gravatar disse:

    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.

  70. Ricardo PereiraNo Gravatar disse:

    Muito obrigado mestre por esse tuto já fazia tempo que estava procurando por uma coisa assim.

  71. jeferson martinsNo Gravatar disse:

    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.

  72. Bruno RochaNo Gravatar disse:

    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!

  73. Rafael PezzettiNo Gravatar disse:

    Ai meu PARABEEENS, esse post salvo meu emprego em tempo recorde !
    muito bom eim !

    Valeww

  74. CarolNo Gravatar disse:

    Olá,

    Tentei o exemplo também do Jorge Lima,
    sem sucesso…

  75. CarolNo Gravatar disse:

    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

  76. renan ReisNo Gravatar disse:

    só queria saber se tem como abrir a janela modal ao abrir o site

  77. DanielNo Gravatar disse:

    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.

  78. MichaelNo Gravatar disse:

    Legal, implementa agora o drag do modal. Abraços.

  79. William MoraisNo Gravatar disse:

    Muito bom!!! funcionou perfeitamente! parabéns….

  80. Danilo Soares Oliveira » Blog Archive » Ajustando janela no lightbox do Maujor disse:

    […] 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 […]

  81. WanessaNo Gravatar disse:

    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!

  82. Lopes FIlhoNo Gravatar disse:

    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?

  83. YagoNo Gravatar disse:

    Tem como ela abrir quando abrir o site?

  84. Ranieri MachadoNo Gravatar disse:

    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.

  85. GiovanniNo Gravatar disse:

    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.

  86. Rodolfo NetoNo Gravatar disse:

    Parabens pela dica, usei e ficou perfeito.

  87. RodrigoNo Gravatar disse:

    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.

  88. Flávio Antunes Estaiano de RezendeNo Gravatar disse:

    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.

  89. Alexandro Antonio Blini MaceirasNo Gravatar disse:

    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’);

  90. Alexandro Antonio Blini MaceirasNo Gravatar disse:

    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.

  91. andrewNo Gravatar disse:

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

  92. jully_chan^^No Gravatar disse:

    adorei, estou começando aprender agora sobre isso e era isso que eu procurava! super simples me ajudou muito! Obrigada^^!

  93. Alex MelloNo Gravatar disse:

    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

  94. JônatahsNo Gravatar disse:

    Oi, pode me ajudar?

    Gostaria que a modal simples abrisse ao carregar a página!

    como mudo para onload?

  95. ChristianoNo Gravatar disse:

    Como faço para carregar a janela modal junto com a pagina(sem botao para clicar).

    Obrigado

  96. DinhuwilliamsNo Gravatar disse:

    Cara, consegui! É muito fácil fazer isso.

  97. thiagoNo Gravatar disse:

    Quando clico no link aparece um alert antes, como posso retira-lo?

  98. RobertoNo Gravatar disse:

    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.

  99. JulioNo Gravatar disse:

    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

  100. HélcioNo Gravatar disse:

    Não consigo abrir a janela modal no IE, existe alguma configuração?

  101. FernandaNo Gravatar disse:

    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 🙂

  102. William PereiraNo Gravatar disse:

    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.

  103. Vilson ArmaniNo Gravatar disse:

    ninguém?

  104. Hugo FerreiraNo Gravatar disse:

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

  105. Vilson ArmaniNo Gravatar disse:

    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.

  106. Alan CesarioNo Gravatar disse:

    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.

  107. PauloNo Gravatar disse:

    Valeu, excelente tutorial.

    Abs

  108. DanielNo Gravatar disse:

    Julio Bernardo
    eu consegui, vc já resolveu a questão?

  109. CleisonNo Gravatar disse:

    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

  110. Jeike | Iframe - Usar ou não? disse:

    […] 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 […]

  111. Elielton alvesNo Gravatar disse:

    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

  112. Simple jQuery Modal Window Tutorial disse:

    […] 16-4-2009: – If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor […]

  113. MaicomNo Gravatar disse:

    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.

  114. LeonardoNo Gravatar disse:

    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!

  115. juniorNo Gravatar disse:

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

  116. Andr[eNo Gravatar disse:

    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?

  117. Andr[eNo Gravatar disse:

    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

  118. DedeNo Gravatar disse:

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

  119. AntonioNo Gravatar disse:

    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.

  120. AntonioNo Gravatar disse:

    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.

  121. CarlosNo Gravatar disse:

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

  122. EliomarNo Gravatar disse:

    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.

  123. Ricardo LuizNo Gravatar disse:

    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

  124. FabioNo Gravatar disse:

    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

  125. adilsomNo Gravatar disse:

    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.

  126. GilmarNo Gravatar disse:

    Execelente, logo vou comprar o livro!!!

  127. Joaniz AbrantesNo Gravatar disse:

    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

  128. JeovaneNo Gravatar disse:

    Gostaria de deixar o href da seguinte forma abaixo

    Que que eu tenho que alterar ?!

  129. JeovaneNo Gravatar disse:

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

  130. Luiz A.No Gravatar disse:

    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…

  131. FelipeNo Gravatar disse:

    tem como maximizar essa tela algum atributo para fazer isso

  132. Helber L. TassinariNo Gravatar disse:

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

  133. FláviaNo Gravatar disse:

    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?

  134. Michael DoniNo Gravatar disse:

    Muito bom, a caixa de login e de carregar ficou show.

    Parabéns pelo trabalho.
    Como sempre demais. E muito funcional

  135. Vinicius RebirthartNo Gravatar disse:

    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.

  136. MaujorNo Gravatar disse:

    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.

  137. GervasioNo Gravatar disse:

    Bem parecido com esse tutorial aqui: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
    Não acha, Kevin?

  138. ViníciusNo Gravatar disse:

    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

  139. ultimoNo Gravatar disse:

    Muito bom mesmo…parabens!!

  140. JuniorNo Gravatar disse:

    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!

  141. FabioNo Gravatar disse:

    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!

  142. Jorge LimaNo Gravatar disse:

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

    }

  143. Julio BernardoNo Gravatar disse:

    Corrigindo… lutando há dias hehehe… errinho básico 😐

  144. Julio BernardoNo Gravatar disse:

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

  145. RodrigoNo Gravatar disse:

    Obrigado pelo tutorial. Parabéns.

  146. Marcelo SantosNo Gravatar disse:

    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.

  147. Tiago BarbosaNo Gravatar disse:

    Mesmo problema do Julio!
    Help!!!

  148. Julio BernardoNo Gravatar disse:

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

  149. Luiz AntonioNo Gravatar disse:

    Muito bom, vou testar

    obrigado

    att, Luiz

  150. PabloNo Gravatar disse:

    Parabens … como sempre nos surpreendendo.

  151. Julio BernardoNo Gravatar disse:

    Corrigindo, vc precisa de uma função englobando o código acima e pôr no onload do body a chamada.

    Abraços

  152. Julio BernardoNo Gravatar disse:

    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();
    // });

  153. Julio BernardoNo Gravatar disse:

    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

  154. Luiz AntonioNo Gravatar disse:

    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.

  155. José CarlosNo Gravatar disse:

    Bom dia Maujor. Gostaria de saber se com esse script é possível abrir no box da janela modal um arquivo html externo.
    Obrigado.

  156. José CarlosNo Gravatar disse:

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

  157. benjamin junior » Blog Archive » Bookmarks de December 13th a December 14th disse:

    […] Janela modal com jQuery | Blog do Maujor – […]

  158. GustavoNo Gravatar disse:

    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!

  159. Gabbay - Criação de sistema e intranetNo Gravatar disse:

    Maujor, sensacional esse script do modal com o Jquery, estava precisando muito de algo assim!

  160. rafaelNo Gravatar disse:

    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

  161. Rodrigo CarvalhoNo Gravatar disse:

    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!

  162. Fernando WebNo Gravatar disse:

    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

  163. Anderson EckelNo Gravatar disse:

    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.

  164. Janela Modal com jQuery – Lightbox para Página Html e Imagens | RHOdesign Blog: Webdesign, Otimização SEO e Webmarketing disse:

    […] Artigo retirado do Blog do Maujor (Vale apena […]

  165. HugoNo Gravatar disse:

    Hnn… pegando o conteúdo do banco de dados, dá pra brincar bastannnnnte com isso ae, viu..

    ótimo post, maujor..

  166. Niler BarcelosNo Gravatar disse:

    Ótimo tutorial.

    Obrigado Maujor!!!!

  167. HelderNo Gravatar disse:

    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…

  168. HelderNo Gravatar disse:

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

  169. BeatrizNo Gravatar disse:

    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/

  170. HelderNo Gravatar disse:

    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.

  171. ROGERIONo Gravatar disse:

  172. ROGERIONo Gravatar disse:

    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?

  173. ROGERIONo Gravatar disse:

    ok obrigado vou tentar. grato.

  174. ErikNo Gravatar disse:

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

  175. ROGERIONo Gravatar disse:

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

  176. Ademir BastianiNo Gravatar disse:

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

  177. Vinicius GuimarãesNo Gravatar disse:

    Maujor,
    Parabéns por mais um ótimo tutorial… não vejo a hora de começar a ler o livro que será lançado!!!

  178. WesleyNo Gravatar disse:

    Sou novo no java, tem como me enviar passo a passo para a produção desse java. Obrigado.

  179. Pablo GamaNo Gravatar disse:

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

  180. Apolo LiraNo Gravatar disse:

    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.

  181. JulianoNo Gravatar disse:

    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.

  182. Nelito ZanguiNo Gravatar disse:

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

  183. CarlosNo Gravatar disse:

    Adorei o seu blog.

  184. Fabio LimaNo Gravatar disse:

    @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

  185. MauroNo Gravatar disse:

    @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

  186. Fabio LimaNo Gravatar disse:

    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.

  187. CineiNo Gravatar disse:

    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.

  188. HelderNo Gravatar disse:

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

  189. andersonNo Gravatar disse:

    muito interessante

  190. Simple jQuery Modal Window Tutorial « Online Free Application Software Tips Tools Wallpapers disse:

    […] 16-4-2009: – If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor […]

  191. andersonNo Gravatar disse:

    muito boa a matéria

  192. Carlos GarciaNo Gravatar disse:

    Já utilizo JQuery em algumas aplicações.
    Sou fã incondicional da biblioteca.
    Parabéns pelo blog!
    Um ótimo lugar para aprender mais!

  193. MarlonNo Gravatar disse:

    Ótimo tutorial. Parabéns.

  194. Wanderson ScopelNo Gravatar disse:

    Olá pessoal, alguem saberia me orientar como chamar essa janela, atravez de um botao em flash poderia ser tanto ActionScript 2 ou 3.

  195. Helder RobaloNo Gravatar disse:

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

  196. OrtubesNo Gravatar disse:

    Consegui fazer funcionar como eu queria, por favor testem para ver se ficou bom. Valeu!

  197. OrtubesNo Gravatar disse:

    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

  198. LúcioNo Gravatar disse:

    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.

  199. AndersonNo Gravatar disse:

    Parabéns. Otima explicação

  200. MatheusNo Gravatar disse:

    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

  201. MaujorNo Gravatar disse:

    @Samira
    Pode sim!
    Coloque o conteúdo dinâmico dentro da div cujo atributo classe tem valor igual a “window”.
    <div class="window">
    ...conteúdo dinâmico aqui...
    </div>

  202. SamiraNo Gravatar disse:

    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

  203. Sérgio RodriguesNo Gravatar disse:

    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!

  204. LuizNo Gravatar disse:

    Excelente o turorial……………com certeza vai auxiliar muita gente

  205. Bernardo ColletNo Gravatar disse:

    muito bom tutorial maujor, utilizo muito janelas modal em meus projetos…

  206. MaujorNo Gravatar disse:

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

  207. NetoNo Gravatar disse:

    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.

  208. Pedro RogérioNo Gravatar disse:

    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.

  209. SérgioNo Gravatar disse:

    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

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo