Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Janela modal com jQuery

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

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.



capa livro javascript   capa livro html   capa livro css   capa livro jquery   capa livro ajax-jquery
capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG

Enquete

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.

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

  1. Sérgio 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

  2. Pedro Rogério 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.

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

  4. Maujor 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?

  5. Bernardo Collet disse:

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

  6. Luiz disse:

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

  7. Sérgio Rodrigues 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!

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

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

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

  11. Anderson disse:

    Parabéns. Otima explicação

  12. Lúcio 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.

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

  14. Ortubes disse:

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

  15. Helder Robalo 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+

  16. Wanderson Scopel disse:

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

  17. Marlon disse:

    Ótimo tutorial. Parabéns.

  18. Carlos Garcia disse:

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

  19. anderson disse:

    muito boa a matéria

  20. 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 [...]

  21. anderson disse:

    muito interessante

  22. Helder 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???

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

  24. Fabio Lima 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.

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

  26. Fabio Lima 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

  27. Carlos disse:

    Adorei o seu blog.

  28. Nelito Zangui 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….

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

  30. Apolo Lira 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.

  31. Pablo Gama 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!!!

  32. Wesley disse:

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

  33. Vinicius Guimarães 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!!!

  34. Ademir Bastiani 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….

  35. ROGERIO 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???

  36. Erik 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!

  37. ROGERIO disse:

    ok obrigado vou tentar. grato.

  38. ROGERIO 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?

  39. ROGERIO disse:

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

  41. Beatriz 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/

  42. Helder 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!!!!

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

  44. Niler Barcelos disse:

    Ótimo tutorial.

    Obrigado Maujor!!!!

  45. Hugo disse:

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

    ótimo post, maujor..

  46. 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 [...]

  47. Anderson Eckel 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.

  48. Fernando Web 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

  49. Rodrigo Carvalho 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!

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

  51. Gabbay - Criação de sistema e intranet disse:

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

  52. Gustavo 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!

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

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

  54. José Carlos 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).

  55. José Carlos disse:

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

  56. Luiz Antonio 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.

  57. Julio Bernardo 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

  58. Julio Bernardo 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();
    // });

  59. Julio Bernardo disse:

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

    Abraços

  60. Pablo disse:

    Parabens … como sempre nos surpreendendo.

  61. Luiz Antonio disse:

    Muito bom, vou testar

    obrigado

    att, Luiz

  62. Julio Bernardo 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. :(

  63. Tiago Barbosa disse:

    Mesmo problema do Julio!
    Help!!!

  64. Marcelo Santos 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.

  65. Rodrigo disse:

    Obrigado pelo tutorial. Parabéns.

  66. Julio Bernardo 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. :(

  67. Julio Bernardo disse:

    Corrigindo… lutando há dias hehehe… errinho básico :|

  68. Jorge Lima 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);

    }

  69. Fabio 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!

  70. Junior 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!

  71. ultimo disse:

    Muito bom mesmo…parabens!!

  72. Vinícius 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

  73. Gervasio disse:

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

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

  75. Vinicius Rebirthart 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.

  76. Michael Doni disse:

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

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

  77. Flávia 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?

  78. Helber L. Tassinari 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á.

  79. Felipe disse:

    tem como maximizar essa tela algum atributo para fazer isso

  80. Luiz A. 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…

  81. Jeovane disse:

    Primeiramente parabéns pelo tutorial excelente :D

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

  82. Jeovane disse:

    Gostaria de deixar o href da seguinte forma abaixo

    Que que eu tenho que alterar ?!

  83. Joaniz Abrantes 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

  84. Gilmar disse:

    Execelente, logo vou comprar o livro!!!

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

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

  87. Ricardo Luiz 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

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

  89. Carlos 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 ???????????

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

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

  92. Dede 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 !!!

  93. Andr[e 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

  94. Andr[e 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?

  95. junior 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, “

  96. Leonardo 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!

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

  98. 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 [...]

  99. Elielton alves 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

  100. 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 [...]

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

  102. Daniel disse:

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

  103. Paulo disse:

    Valeu, excelente tutorial.

    Abs

  104. Alan Cesario 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.

  105. Vilson Armani 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. Hugo Ferreira 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..

  107. Vilson Armani disse:

    ninguém?

  108. William Pereira 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.

  109. Fernanda 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 :)

  110. Hélcio disse:

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

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

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

  113. thiago disse:

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

  114. Dinhuwilliams disse:

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

  115. Christiano disse:

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

    Obrigado

  116. Jônatahs disse:

    Oi, pode me ajudar?

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

    como mudo para onload?

  117. Alex Mello 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

  118. jully_chan^^ disse:

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

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

  120. Alexandro Antonio Blini Maceiras 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.

  121. Alexandro Antonio Blini Maceiras 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′);

  122. Flávio Antunes Estaiano de Rezende 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.

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

  124. Rodolfo Neto disse:

    Parabens pela dica, usei e ficou perfeito.

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

  126. Ranieri Machado 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.

  127. Yago disse:

    Tem como ela abrir quando abrir o site?

  128. Lopes FIlho 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?

  129. Wanessa 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!

  130. 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 [...]

  131. William Morais disse:

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

  132. Michael disse:

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

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

  134. renan Reis disse:

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

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

  136. Carol disse:

    Olá,

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

  137. Rafael Pezzetti disse:

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

    Valeww

  138. Bruno Rocha 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!

  139. jeferson martins 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.

  140. Ricardo Pereira disse:

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

  141. Eduardo Leandro Alves 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.

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

  143. Pedro Maia 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

  144. Sidônio Raftopoulos 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?

  145. Michell 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?

  146. Michell 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?

  147. roberto disse:

    Michell, não use iFrame.

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

  149. Aleberto 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?

  150. Vinicius 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?

  151. Jean Patrick 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;
    }

  152. José Maria disse:

    Passando so para agradecer ^.^

  153. Felipe disse:

    sensacional!!!! estava a procura disso.
    Obrigao

  154. 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 [...]

  155. Paulo Roberto Bolsanello 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,

  156. silvio fischer 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?

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

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

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

  159. Marcos 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””

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

  161. Pedro TerreCo 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;
    }

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

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

  164. Matheus M disse:

    Aqui aponta erro no Javascript, pode concertar?

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

  166. Diego Sampaio disse:

    Parabéns, conteúdo de qualidade!

  167. Djalma disse:

    Muito bom o tuto, obrigado por compartilhar.

  168. Renato Freitas disse:

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

  169. Maycon disse:

    Como colocar uma barra de rolagem??? socorrooo

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

  171. Robson Barreto 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 !

  172. Janela modal com jQuery - Matheus Piscioneri disse:

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

  173. Edson Rodrigues 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

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

  175. Lais disse:

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

  176. Eduardo 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!

  177. Allan disse:

    Parabéns pelo seu trabalho.

  178. Luiz Fernando 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!

  179. Elisangela 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?

  180. Joyce 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:

  181. Tamara disse:

    Como deixar o modal temporário?

  182. Liherbert 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?

  183. Kennedy Silva 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

  184. Artur disse:

    Muito legal… Funciona certinho.

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

  185. Santos disse:

    Ótimo post, continue assim.

    Parabéns.

    Abraço.

  186. Thiago 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;” ?

  187. ganhar mais curtidas disse:

    Muito bom adorei, obrigado!!

Comentário:





Subscrição de comentários sem comentar

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

Voltar ao topo

PR Tool


ir topo

Switch to our mobile site