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

Home Arquivos Sobre Contato

Manipular o elemento select com jQuery Efeito jQuery toggle para revelar e esconder

Janela modal com jQuery

Publicado em: 2009-04-16 214.604 visualizacoes
Curtir 12 34 10

16
Jquery Criar site Html tutorial Criar blog

Anncios Google

Neste tutorial eu vou mostrar para vocs uma tcnica 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 contedo do DIV cujo id tenha sido definido no atributo href do link. jQuery realmente simplifica e torna fcil as coisas. D uma olhada nos exemplos que eu desenvolvi para demonstrar a tcnica. Eles me parecem bem interessantes

Anuncie no Google
Services.Google.com/A Seu Site pode Dar mais Retorno com Nossas Solues de Publicidade!

Caso voc no saiba o que uma janela modal, voc pode visualiz-la na pgina de demonstrao 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 contedo do div cujo id definido no atributo href do link, conforme dito anteriomente. Os objetivos so : 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 ao de mostrar, em uma janela modal, o contedo do div cujo id definido no atributo href do link. Criar uma mscara que preencha toda a tela.

 Criar uma janela modal que seja simples e fcil de modificar.

1. Marcao HTML e atributos do elemento a

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14.

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

-->

<!-- Boto para fechar a janela tem class="close" --> <a href="#" class="close">Fechar [X]</a><br /><br>Janela Modal Simples<br /> <br>Aqui vai o contedo da sua Janela Modal Simples.<br></div>

15. 16. <!-- No remova o div#mask, pois ele necessrio para preencher toda a janela --> 17. <div id="mask"></div> 18. </div>

2. CSS
01. <style>/* O zdiv.window */ 02. #mask {position:absolute; 03. z-index:9000; 04. background-color:#000; 05. display:none; 06. } 07. 08. #boxes .window { 09. position:absolute; 10. width:440px; 11. height:200px; 12. display:none; 13. z-index:9999; 14. padding:20px; 15. } 16. 17. /* Personalize a janela modal aqui. Voc pode adicionar uma imagem de fundo. */ 18. #boxes #dialog { 19. width:375px; 20. height:203px; 21. </style> 22. }

23. 24. 25. 26. 27. 28.

/* posiciona o link para fechar a janela */ .close { display:block; text-align:right; } </style>

3. JavaScript
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43.

<script type="text/javascript"> $(document).ready(function() { //seleciona os elementos a com atributo name="modal" $('a[name=modal]').click(function(e) { //cancela o comportamento padro 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 dimenses da tela $('#mask').css({'width':maskWidth,'height':maskHeight}); //efeito de transio $('#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 transio $(id).fadeIn(2000); }); //se o botoo fechar for clicado $('.window .close').click(function (e) { //cancela o comportamento padro do link e.preventDefault(); $('#mask, .window').hide(); }); //se div#mask for clicado $('#mask').click(function () { $(this).hide(); $('.window').hide();

44. }); 45. }); 46. </script>

Os cdigos so diretos e de fcil entendimento. No se esquea de linkar para a biblioteca jQuery ao documento.

4. Concluso
isso, e somente isso, que voc precisa saber para criar uma janela modal simples. Neste tutorial eu ensinei como apresentar o contedo 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 esto em busca de uma janela modal totalmente personalizvel, esta tcnica que eu mostrei perfeita. Dvidas e contribuies? Poste nos comentrios. Obrigado por ler. Crditos: Author: Kevin Liew URL do artigo original: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Anncios Google

Css div

Tela janela

Css tutorial

Css in html

----------------x-x-x---------------

fim da matria ---------------x-x-x---------------

Livros do Ma ujor
Desenvolvimento com Pa dres Web? Adquiraos livros do Ma ujor
Clique o livro pa radeta lhes.

Enquete
Ver arquivos de enquetes
Esta matria foi publicada em: 2009-04-16 (quinta-feira). Subscreva o feed RSS 2.0 para comentrios. Comente abaixo, ou link para http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/trackback no seu site.

167 comentrios nama tria : Ja nelamoda l com jQuery

1. Srgio disse: 2009 - 04 - 16 2:28 GMT Opa! Gostei, ainda que quero/estou aprender Javascript bruto, sempre bom usar o jQuery. Maujor, continue assim, suas publicaes foram essncias para mim e para o timo trabalho que tenho hoje. Acima de tudo parabns. Um forte abrao. Srgio 2. Pe dro Rogrio disse: 2009 - 04 - 16 11:20 GMT

Muito bom o tutorial, creio que vai ajudar muita gente. Seria legal tambm voc fazer um tutorial para criao de uma janela modal para uma galeria de imagens, onde a largura e altura do modal so dinmicas. Creio que essa a dvida de muita gente, com isso as pessoas acabam recorrendo a utilizao de plugins. Abraos. 3. Ne to disse: 2009 - 04 - 16 12:16 GMT Opa, parabns pelo tuto, Show de bola. Entendi tudinho, realmente sua didtica impressionante Maujor. Lembro-me que o conheci quando queria aprender CSS, e seu site http://www.maujor.com foi essencial. S para fomentar os comentrios, discordo de Pedro Rogrio, 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 algum desenvolveu algo e quis compartilhar, eu no vou desprezar seu esforo. Como exemplo, utilizo este blog, sei que feito com wordpress, voc no o fez do Zero. Este formulrio que estou utilizando para redigir, o sysntax hiligth dos cdigos, tudo j estava pronto em algum lugar, e o Maujor sabiamente os reaproveitou. No acho nada de arrado nisso. 4. Maujor disse: 2009 - 04 - 16 12:26 GMT @Neto Voc tem toda razo. Se algum j quebrou a cuca, encontrou uma soluo e disponibilizou para uso, vamos us-la. A sugesto do @Pedro Rogrio muito boa, pois em alguns casos necessitamos de solues mais simples que as solues prontas e alm disso temos que considerar o carter didtico de mostrar uma soluo. Obrigado a vocs dois pelo comentrio. Algum se habilita a desenvolver a soluo proposta pelo Pedro? rnardo Colle t disse: 2009 - 04 - 16 13:37 GMT 5. Be muito bom tutorial maujor, utilizo muito janelas modal em meus projetos 6. Luiz disse: 2009 - 04 - 17 18:12 GMT Excelente o turorialcom certeza vai auxiliar muita gente 7. Srgio Rodrigue s disse: 2009 - 04 - 18 15:32 GMT gostei demais desse tutobem esclarecedori olhar muito bom pra sistemas phpj estou ate testando em um aquibom mesmoespero ancioso pelo livro..abrao! 8. Samira disse: 2009 - 04 - 22 13:36 GMT Uma pergunta a respeito dessa janela ela pode receber conteudo dinamico ou ainda no, pois pretendo usar ela com contedo que outra pessoa vai carregar no adm 9. Maujor disse: 2009 - 04 - 22 14:28 GMT @Samira Pode sim! Coloque o contedo dinmico dentro da div cujo atributo classe tem valor igual a window.
<div class="window"> ...contedo dinmico aqui... < /div>

us disse: 2009 - 04 - 23 17:03 GMT 10. Mathe Show de bola! Parabns Maujor! Mais um excelente post e mais uma dvida esclarecida! Seu blog assim como o seu site, no tem do que discordar, referncia nmero 1!!! Parabns 11. Ande rson disse: 2009 - 04 - 24 19:26 GMT Parabns. Otima explicao 12. Lcio disse: 2009 - 04 - 27 18:56 GMT Tenho uma dvida. No IE 6, quando a pgina principal possui combos, a div #mask no os sobrepem. Gostaria de saber existe alguma forma de resolver esse problema, j que tenho muitos usurios que utilizam esse browser. Obrigado e parabns pelo site.

13. Ortubes disse: 2009 - 04 - 28 18:17 GMT Preciso criar uma janela modal que seja acionado assim que abre a pgina, ou seja, quando a URL for acessada, o usurio ter a opo de ver a pgina ou no. Exemplo: Este vdeo pode ser improprio para alguns usurios Entrar > Sim quero ver. Sair > No quero ver. J consegui intalar o SimpleModal, mas depois que a pgina aberta tm 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: 2009 - 04 - 29 21:26 GMT Consegui fazer funcionar como eu queria, por favor testem para ver se ficou bom. Valeu! 15. Helder Robalo disse: 2009 - 05 - 8 13:15 GMT dinossauro, sei que no 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: 2009 - 05 - 9 1:29 GMT 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: 2009 - 05 - 11 16:39 GMT timo tutorial. Parabns. 18. Carlos Garcia disse: 2009 - 05 - 14 11:48 GMT J utilizo JQuery em algumas aplicaes. Sou f incondicional da biblioteca. Parabns pelo blog! Um timo lugar para aprender mais! 19. anderson disse: 2009 - 05 - 16 21:46 GMT muito boa a matria 20. Simple jQuery Modal Window Tutorial Online Free Application Software Tips Tools Wallpapers disse: 2009 - 05 18 15:15 GMT

[...] 16-4-2009: If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor [...] 21. anderson disse: 2009 - 05 - 18 19:04 GMT muito interessante 22. Helder disse: 2009 - 05 - 22 16:19 GMT 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 edio de seus respectivos dados. Como fao para identificar o cliente a ser editado na janela modal (saber que estou editando os dados do Joo e no do Marcos) ??? possivel implementar essa idia??? 23. Cinei disse: 2009 - 05 - 26 1:48 GMT Gostei muito do tutorial. Modifiquei um pouco para atender ao meu objetivo, mas estou com dificuldade

contedo do banco de dados. Tem algu ma dica qu e possa facilitar? E parabns tambm pelo livro. Est sendo mu ito til em meuaprendizado da jQu ery. 24. Fabio Lima disse: 2009 - 06 - 4 23:35 GMT Qu al a fu no do z-index? Tenho u ma modal aplicada em site joomla (www.portaldepau linia.com.br) onde de cara abre a janela, s qu e itens qu e deveriam ficar por trs (ou tros banners) aparecem na frente Estouachando qu e deve ter a ver com o z-index mas j alterei os valores no cdigo e no obtive resu ltado Abraos e Mau jor, parabns. 25. Mauro disse: 2009 - 06 - 8 13:12 GMT @Fabio Lima Para saber mais sobre o z-index visite o link a segu ir. http://www.vw3schools.com/Css/pr_pos_z-index.asp E caso a su a janela modal aparece sobre algu m banner em flash. Este deve ser definido com o parametro wmode com valor transparent. Adicionando o parametro 26. Fabio Lima disse: 2009 - 06 - 11 19:05 GMT @Mau ro Obrigado amigo, s editando o link correto qu e : http://www.w3schools.com/Css/pr_pos_z-index.asp Qu anto ao wmode transparent euj havia aplicado mas parece qu e a ordem de carregamento e z-index das divs no joomla! Assim qu e arru mar de fato eudouretorno (se qu e interessa a lgu m n! Rsrsrs). Abraos 27. Carlos disse: 2009 - 06 - 17 15:44 GMT Adorei o seublog. 28. Nelito Zangui disse: 2009 - 06 - 18 10:33 GMT Como sempre, disposto a aju dar os aflitos. Esta materia veio a calhar, nu ma altu ra em qu e precisava mesmo de algo parecido para algu ns trabalhos. Obrigado Mau ricio e, continu e mandando. 29. Juliano disse: 2009 - 06 - 23 13:12 GMT Parabns pelo tu torialGostaria de saber u m jeito de tornar essa janela modal acessvel no caso de o u su rio estar com javascript desabilitado, tipo o link continu ar fu ncionando direcionando a u ma nova pgina caso o javascript no fu ncione. 30. Apolo Lira disse: 2009 - 06 - 23 19:22 GMT Ol Mau jor, Acabo de comprar o seulivro sobre Jqu ery, no vejo a hora de chegar, e tomara qu e tenha ou tros tru qu es no revelados ainda em seublog, u ma dvida qu e tive, tem algu m tipo de cd, oudvd, com algu ns exemplos prticos ? Obrigado, parabns pela dedicao a web qu e voc tem, com certeza aju doua formar mu itas mentes brilhantes, e vai continu ar aju dando. Eudiria qu e o Mau jor o Renato Ru sso da web, hehehe ValeuAbrao. 31. Pablo Gama disse: 2009 - 07 - 16 19:27 GMT Boa Tarde Mau jor! Primeiro qu ero parabeniz-lo pelo blog tem excelentes tu torias qu e me aju dam mu ito em meu s 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 pginas2 s que os links da pagina2 no 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 Endereo : http://zunca.net/novo/index.html Link Produtos. Abrao!!! 32. Wesley disse: 2009 - 07 - 21 15:24 GMT Sou novo no java, tem como me enviar passo a passo para a produo desse java. Obrigado. 33. Vinicius Guimares disse: 2009 - 07 - 26 2:32 GMT Maujor, Parabns por mais um timo tutorial no vejo a hora de comear a ler o livro que ser lanado!!! 34. Ademir Bastiani disse: 2009 - 08 - 14 19:12 GMT Ola, queria fechar a tela que abriu somente quando clicar na opo fechar , no simplesmente clicando fora da tela. como fao isso , fecahr a tela sem clicar fora da opo fechar. 35. ROGERIO disse: 2009 - 09 - 16 14:47 GMT BOA TARDE, GOSTARIA DE SABER COMO FAO 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: 2009 - 09 - 16 17:34 GMT @Vinicius Guimares: Simples, s retirar essa parte do cdigo 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 cdigos ou pode fazer o download localizado no topo da pgina e simplesmente modificar o (html)markup e css! 37. ROGERIO disse: 2009 - 09 - 16 17:59 GMT ok obrigado vou tentar. grato. 38. ROGERIO disse: 2009 - 09 - 16 18:09 GMT OL Erik comentei a parte do script, mas no link como ficaria para chamar ??? assim? <a href="#dialog= name=modal> , se for no esta rolando E tambm tem o div no teria que que ficar dendro do loop para pegar o id que eu clicar? 39. ROGERIO disse: 2009 - 09 - 16 18:10 GMT 40. Helder disse: 2009 - 09 - 16 19:11 GMT Rogrio, O usurio Erik respondeu a pergunta do usurio Ademir Bastiani. Eu tmb estou querendo saber como fazer para abrir um link dentro deste exemplo de modal. Receio que com esse cdigo no d para fazer, a menos que seja reescrito. Se algum tiver conhecimentos avanados na rea e puder adapatar esse cdigo, ficaramos gratos. 41. Beatriz disse: 2009 - 09 - 17 15:39 GMT

Ol, primeiramente parabenizar pelo excelente trabalho de sempre. Acompanho o site, blog e livros, pois todos so de grande ajuda. Minha dvida o seguinte; peguei 2 tutoriais daqui do blog esse da janela modal e o mtodo load. Quis que, com esses dois, pudesse carregar pginas dentro de uma janela modal, mas o que ta acontecendo que o conteudo da pgina (filho) pega a opacidade da janela modal (pai). Tanto div pai, quanto div filho esto 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, agradeo MUITO. O link para teste o seguinte: http://www.creatyve.com.br/teste_lightbox/ 42. Helder disse: 2009 - 09 - 17 21:18 GMT Ol Com o FACEBOX descobri q possvel abrir um link dentro de uma janela modal. s seguir as instrues.. Segue abaixo o link: http://famspam.com/facebox Boa sorte!!!! 43. Helder disse: 2009 - 09 - 17 21:23 GMT Ol Vejam vrias formas de implementao com o facebox que achei na web. http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm Espero ter ajudado 44. Niler Barcelos disse: 2009 - 10 - 16 14:15 GMT timo tutorial. Obrigado Maujor!!!! 45. Hugo disse: 2009 - 10 - 16 14:53 GMT Hnn pegando o contedo do banco de dados, d pra brincar bastannnnnte com isso ae, viu.. timo post, maujor.. 46. Janela Modal com jQuery Lightbox para Pgina Html e Imagens | RHOdesign Blog: Webdesign, Otimizao SEO e Webmarketing disse: 2009 - 10 - 18 4:58 GMT [...] Artigo retirado do Blog do Maujor (Vale apena [...] 47. Anderson Eckel disse: 2009 - 10 - 24 22:01 GMT Ol Maujor um privilgio estar escrevendo para vc, pois considero vc um icone. Estive lendo seu tutorial acima e me deparei com uma dvida. Acontece que deu 99% certo o resultado aqui, tirando apenas o fato de que usei para uma tela de notcias onde tenho vrioosss linksse 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: 2009 - 11 - 5 12:13 GMT Bom dia Maujor; um prazer! Gostaria de saber se possivel a janela modal enviar informaes para a janela me, ou seja, se eu colocar um boto 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: 2009 - 11 - 6 10:48 GMT 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!!! Parabns Maujor! 50. rafael disse: 2009 - 11 - 7 20:52 GMT ola Maujor estou com o mesmo problema do Anderson. Gostaria que a janela modal aparecesse no centro da tela apresentada. Se possvle envie a resposta por email ou um tpico para isso pois creio que possa existir mais alguem com esta duvida. att 51. Gabbay - Criao de sistema e intranet disse: 2009 - 11 - 28 18:01 GMT Maujor, sensacional esse script do modal com o Jquery, estava precisando muito de algo assim! 52. Gustavo disse: 2009 - 12 - 8 14:00 GMT Maujor, parabns pelo script, mais gostaria de saber como fao 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: 2009 - 12 - 14 13:05 GMT [...] Janela modal com jQuery | Blog do Maujor [...] 54. Jos Carlos disse: 2009 - 12 - 16 14:00 GMT Ol Maujor. Parabns pelo script. Ficou excelente. Porm 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: 2009 - 12 - 16 14:05 GMT Bom dia Maujor. Gostaria de saber se com esse script possvel abrir no box da janela modal um arquivo html externo. Obrigado. 56. Luiz Antonio disse: 2009 - 12 - 20 21:57 GMT Ol Maujor, parabns pelo script ficou muito bom, utilizo demais modal em meus sistemas. Gostaria de saber se a possibilidade de quando entrar na pgina, 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 no sei se possivel mas tipo assim <body onload="dialog()" se tiver alguma forma de fazer isso, porque eu tentei aqui e confesso que no consegui. Grato. 57. Julio Bernardo disse: 2010 - 01 - 11 23:59 GMT Ol Maujor. Primeiramente, parabns pelo tutorial. Excelente! Diante disso, consegui fazer um banner modal no onload da pgina. Obrigado! O nico problema Maujor, que eu tenho um banner rotativo em flash na minha pgina, quase no topo, e quando acontece o onload, o dialog modal faz seu papel, porm 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, no sei se funcionaria tambm. Voc tem alguma idia? Obrigado mais uma vez. Abraos 58. Julio Bernardo disse: 2010 - 01 - 12 0:04 GMT Respondendo a pergunta do amigo (Luiz Antonio) acima, d sim. Eu fiz um banner modal da seguinte forma: comentei a funcao click e ento ela agora starta sem a necessidade de click do mouse, mas sim toda vez que damos refresh na pgina. Tambm 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: 2010 - 01 - 12 0:13 GMT Corrigindo, vc precisa de uma funo englobando o cdigo acima e pr no onload do body a chamada. Abraos 60. Pablo disse: 2010 - 01 - 12 13:48 GMT Parabens como sempre nos surpreendendo. 61. Luiz Antonio disse: 2010 - 01 - 12 22:33 GMT Muito bom, vou testar obrigado att, Luiz 62. Julio Bernardo disse: 2010 - 01 - 12 23:25 GMT Legal! Ser algum tiver alguma idia de como ajudar-me com o problema acima, agradeo minha gente. Pior que nesse meu caso, acho que no tem jeito. 63. Tiago Barbosa disse: 2010 - 01 - 16 17:15 GMT Mesmo problema do Julio! Help!!! 64. Marcelo Santos disse: 2010 - 01 - 17 21:09 GMT Ola Maujor, parabns pelos tutoriais, vc tem me ajudado muito, mas to com um problema, at agora no 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 no funciona. Se poder revisar o codigo seria muita gentileza da sua parte. Obrigado. 65. Rodrigo disse: 2010 - 01 - 18 18:08 GMT Obrigado pelo tutorial. Parabns. 66. Julio Bernardo disse: 2010 - 01 - 18 21:07 GMT No quero ser chato no rsrs, mas no consegui resolver meu problema. Toda vez que a janela modal aparece, o banner flash que deveria estar atrs, sobrepe a janela modal e d um efeito ridculo e muito indesejado. Algum tem alguma idia? Estou lutando a dias pra resolver isso. 67. Julio Bernardo disse: 2010 - 01 - 18 21:08 GMT Corrigindo lutando h dias hehehe errinho bsico

68. Jorge Lima disse: 2010 - 01 - 19 18:20 GMT Para abrir o modal no onload da pgina: $(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: 2010 - 01 - 21 12:42 GMT 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: 2010 - 01 - 27 5:21 GMT Ser que alguma alma caridosa pode criar um HTML simples, apenas com a funo que chama a janela modal ao acessar uma pgina HTML? Li o exemplo acima, mas infelizmente no tive conhecimento suficiente para poder implant-lo.

Obrigado! 71. ultimo disse: 2010 - 02 - 12 3:37 GMT Muito bom mesmoparabens!! 72. Vincius disse: 2010 - 02 - 19 14:27 GMT Ol Maujor, muito interessante esse efeito, est ajudando muita gente, mas eu tenho uma dvida, como criar uma janela modal com aquele efeito drag and drop pra mover ela por toda tela? Obrigado 73. Gervasio disse: 2010 - 02 - 26 18:35 GMT Bem parecido com esse tutorial aqui: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial No acha, Kevin? 74. Maujor disse: 2010 - 02 - 26 18:51 GMT Gervasio No parecido no, IGUAL, pois trata-se de uma traduo com a devida permisso do autor Kevin e crditos no final da matria. Antes de postar bobagens leia a matria toda. Nota: Ia te responder por mensagem privada, mas voc forneceu um email inexistente portanto vai publicamente mesmo. 75. Vinicius Rebirthart disse: 2010 - 03 - 2 15:53 GMT Muito bom esse lightbox. Mas preciso de uma ajuda como fao 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: 2010 - 03 - 12 13:19 GMT Muito bom, a caixa de login e de carregar ficou show. Parabns pelo trabalho. Como sempre demais. E muito funcional 77. Flvia disse: 2010 - 03 - 15 19:38 GMT Estou com um problema. Tenho uma tela principal com 3 frames. O frame central chama a janela modal. So que ela no preenche a tela inteira, apenas a frame em que foi chamado. Gostaria de preencher a tela inteira. Algum pode me ajudar? 78. Helber L. Tassinari disse: 2010 - 03 - 17 19:01 GMT Muito bom o artigo, mas gostaria desaber se possvel fazer com que uma modal abra outra? Pois gostaria de abrir uma modal igual a Janela Modal Simples dos exemplos e com um boto na modal chamar outra por cima. Agradeo desde j. 79. Felipe disse: 2010 - 03 - 18 20:39 GMT tem como maximizar essa tela algum atributo para fazer isso 80. Luiz A. disse: 2010 - 04 - 4 0:44 GMT Legal pessoal! A transformao 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 no clicar em fechar no modal ela no faz nada, por que o codigo at agora se eu clicar fora da janelinha que se abre, o modal some

Valeww abrao 81. Jeovane disse: 2010 - 04 - 4 14:07 GMT Primeiramente parabns pelo tutorial exc elente Mais assim c omo vrias outras pessoas tenho dvidas c omo irei desc rever abaixo: Meu problema o seguinte, tenho um formulrio de pesquisa onde listo os c lientes c adastrados, e tem algumas operaes c omo Altera Exc luir +Detalhes. Quando eu c lic asse em Exc luir ento gostaria que me aparec esse na janela modal a pessoa que eu desejo Exc luir, ou seja, pegar o seu ID do banc o de dados (MySQL) para mim c onfirmar ou c anc elar a operao. Mais eu reparei que ela s abre de o href fic ar assim >> href=#dialog2; <> href ="> << .. c omo pode ver, pegando o ID de quem eu desejo exc luir. Mais se eu deixar o link dessa forma que falei ela no abre. Sabes me dizer o que que tenho que modific ar para ela fic ar c om a func ionalidade que desejo ?! 82. Jeovane disse: 2010 - 04 - 4 14:09 GMT Gostaria de deixar o href da seguinte forma abaixo Que que eu tenho que alterar ?! 83. Joaniz Abrantes disse: 2010 - 04 - 7 17:04 GMT Ol tudo bem? Estou tentando utilizar essa janela modal no menu princ ipal do site. A pessoa c lic a e puxa uma pagina em HTML em branc o mesmo, so c om o texto e fotos, isso possivel? Me de uma luz por favor. Obrigado pela ateno 84. Gilmar disse: 2010 - 04 - 8 23:24 GMT Exec elente, logo vou c omprar o livro!!! 85. adilsom disse: 2010 - 04 - 10 15:10 GMT ola, eu prec iso c arregar o c onteudo do meu sistema dentro de uma DIV, mas so os link que tenham form_ac tion=ask-edit na URL
a href='card.php?form_action=ask-edit'

Se c lic ar em editar c arregar o c onteudo da pagina c ard.php dentro de uma div no c entro, e o fundo esc urec er. 86. Fabio disse: 2010 - 04 - 15 19:37 GMT Maujor parabns pelo trabalho Estou fazendo uma adaptao em um site e gostaria de usar a janela modal em um link no rodap, mas a janela abre no topo.Tem c omo fazer sempre c entralizada na pagina Grande abrao 87. Ricardo Luiz disse: 2010 - 04 - 21 12:40 GMT Prezado Maujor, parabns pelo trabalho. Ac abei de ler seu livro, c onstruindo sites c om X HTML e gostei muito. Mas no podemos c onsiderar estes exemplos c omo janelas modais, pois elas permitem o seu fec hamento interagindo c om a princ ipal. Como c oloc ar a obrigatriedade de fec hamento dentro da propria janela que se abriu? Abrao 88. Eliomar disse: 2010 - 05 - 17 13:41 GMT Parabns Maujor!!!! Hoje seu trabalho muito ac essado pelos que se interessam por c ss e html. parabns pela sua inic iativa de ensinar e public ar seus c onhec imentos. 89. Carlos disse: 2010 - 05 - 19 20:11 GMT Oc digo legal, o efeito legal, mas no tem nada de modal nessa janela. Ela apenas aparec e por c ima da outra janela e quando alguem c lic a em alguma parte da tela, mesmo em outro programa, a tal janela modal desaprec e. janela modal aquela que impede o ac esso aos outros objetos enquanto ela estiver ativa. Como fazer para que ela seja modal de verdade ???????????

90. Antonio disse: 2010 - 07 - 19 19:40 GMT Ol, Maujor! Voc pode dar uma dica de como utilizar a janela modal que voc demonstrou com a funo onbeforeunload? Como chamar a janela model com tal funo? Para mim, mostrar a janela basta, sem as opes de ok e cancelar. Quero, quando estiver numa sesso, que aparea a janela apenas para dizer que o usurio deve fechar a sesso e no fechar o navegador. Ocorre que o navegador Opera, por exemplo, na sua caixa de dilogo javascript, possui um campo para desabilitar os scripts, e se utilizar a janela modal, esse campo no aparece. Se puder, d uma dica, por favor. Um abrao, Antonio. 91. Antonio disse: 2010 - 07 - 21 1:46 GMT Se no sabe como usar onbeforeunload com a janela modal, s responder. Ningum obrigado a saber tudo, apesar de existir aqueles que pensam que sabem. 92. Dede disse: 2010 - 07 - 25 20:18 GMT Desculpem a todos se esta questo j foi tratada, mas busquei nos comentrios (que no so poucos diga-se de passagem) e encontrei uma pessoa com a mesma dvida minha, s que no vi a resposta. Usei esta janela para trazer um textfield que servir para atualizar o email no banco, agora no consigo fazer com que ao enviar o form e fechar a div modal dar um refresh na pagina principal? Algum encontrou a soluo? No mais parabns pelo post, excelente !!! 93. Andr[e disse: 2010 - 07 - 27 23:39 GMT Maujor, parabns 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: 2010 - 07 - 27 23:44 GMT 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: 2010 - 07 - 28 19:12 GMT 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 ento 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: 2010 - 07 - 30 11:58 GMT Ola, Gostei do tuto e esta funcionando legalporemhouve 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 soluo pra eu?? Obrigado! 97. Maicom disse: 2010 - 08 - 28 15:23 GMT 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 cdigo no d certo de jeito nenhum cara.

98. Simple jQuery Modal Window Tutorial disse: 2010 - 08 - 30 13:33 GMT [...] 16-4-2009: If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor [...] 99. Elielton alves disse: 2010 - 09 - 2 18:37 GMT Ol Maujor o meu funcionau em uma pagina simples se eu coloco ele em uma pgina que contem um light-box (galeria de fotos) ele no est funcionando. Desde j agradeo 100. Jeike | Iframe - Usar ou no? disse: 2010 - 09 - 10 20:54 GMT [...] digitados, cadastrar um novo registro e recarregar um combo para mostr-lo. Fcil! Coloco uma janela Modal, abro num efeito pra deixar o usurio de boca aberta, executo o cadastro e volto para a pgina [...] 12

Comentrio:
Nome:Obrigatrio

e-mail:(no ser publicado) Obrigatrio

Web Site: Opcional

Comentrio: Obrigatrio

Enviar comentrio

Notificar-me via e-mail sempre que houver novo comentrio nesta matria.

Subscrio de comentrios sem comentar Subscrio de comentrios E-mail:

Teclar "Enter" cria um novo pargrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

Vagas em Administrao?
www.Catho.com.br/Administracao Empregos na rea de Administrao! Busque Grtis Vaga em Administrao Blog do Maujor, todos os direitos reservados. Blog do Maujor is proudly powered by WordPress. XHTML e CSS adaptados pelo Maujor. Design por Srgio Burlamaqui Switch to our mobile site