Screencaster Transmitindo conhecimento




Criando janela modal (estilo lightbox) com Javascript e jQuery [ATUALIZADO]

Seguindo nossa série de vídeos sobre jQuery, neste vídeo eu mostro como criar uma janela modal (semelhante à lightbox), usando javascript[bb] e jQuery. O vídeo está um pouco mais longo que os outros, mas muito interessante.

Segue o código da função que eu precisei utilizar no vídeo[bb] para pegar as dimensões da página:

// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
 
var xScroll, yScroll;
 
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
 
var windowWidth, windowHeight;
if (self.innerHeight) {	// all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
 
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
 
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
 
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
 
return arrayPageSize;
}

Espero que gostem, até mais!

OBS: Para criar um botão “fechar” na janela modal, utilize as dicas que o pessoal publicou nos comentários.

Função fechar():

function fechar() {
    $("#janela_modal").fadeOut()
    $("#overlay").fadeOut()
}

Eu consigo produzir conteúdo gratuito para o blog graças à ajuda do pessoal que compra as aulas pagas. Se você puder, compre uma das aulas pro e ajude a manter este blog no ar.


30 pessoas comentaram

  1. Alan Douglas disse:

    Olá amigo,

    gostei muito da vídeo-aula em relação a Janela Modal mas vc disse que iria disponibilizar os arquivos em um post mas não achei. Tem algum post com os arquivos pra termos acesso?? Abraço e parabéns pelos conhecimentos aqui passados.

    Alan

  2. inside disse:

    Coloquei os arquivos para download Alan. Obrigado pelo feedback!

  3. Alan Douglas disse:

    Valeu… peguei… obrigado

  4. Thiago Albuquerque Severo disse:

    E ai cara tudo beleza, gostei muito do seu video mas tenho duas dúvidas como faco se em uma mesma pagina eu tiver varios links, notei que ate os links dos grids sao afetados pelo script e o chamam, fazendo assim com que todos os links da pagina chamem o script e eu quero apenas um link em especifico, outra pergunta como faco para inserir um botao fechar para que o ususario possa fechar o modal na hora que ele quiser? agradeco desde já a atencao!

  5. Thiago Albuquerque Severo disse:

    Ola amigo ja consegui resolver o meu problema, mas apareceu outro, como faço para colocoar um botao fechar em cima do modal no canto direito?

  6. Igor Marlus disse:

    Também gostaria de saber como fecho a janela!

  7. Igor disse:

    os arquivos do tuto nao estao mais disponiveis..pq? o q houve.?

  8. inside disse:

    Olá Igor, acabei de corrigir os links ;)

  9. Biro disse:

    Como coloco o botão fechar ?

  10. Maury Ramos disse:

    Muito show esse vídeo, foi de grande utilidade pra mim, parabéns !
    Gostaria de saber como que faz pra incluir o botão fechar.

    Aguardo sua ajuda.

  11. Raquel disse:

    Oi Igor! Obrigada pelo tutorial, era o que precisava!
    Mas, estou com o mesmo problema que o Thiago teve, os outros links tbém estão com o efeito, só queria em dois botões. Como faço?
    Como não vi a sua resposta do botão fechar, tbém gostaria de saber como fazer pra fechar e continuar navegando na página do site.
    Agradeço desde já pela ajuda.

  12. Ola pessoal um possivel codigo para o butao fechar!

    Butao ———-

    [X] Fechar

    Codigo ————

    function fechar(){

    document.getElementById(‘janela_modal’).style.display=’none’;
    document.getElementById(‘overlay’).style.display=’none’;

    }

    Espero ter ajudado, ok

    • inside disse:

      Seria melhor usar as funções do jQuery como fadeOut() ou remove()

      • Pode ser também Inside, so mostrei para o pessoal quem entende pouco de javascript e quase nada de jQuery, mais essas funções devem ser usadas para manter o padrão, valeuu

      • Eduardo disse:

        Como amigo disse para esse tutorial ficar 100% só falta detalhar no código ou responder para galera como inserir o Botão Fechar.

        Eu também tentei várias vezes e nada….Adoro seu artigos e gostaria de finalizar esse exemplo que concerteza será útil para todos.

        • inside disse:

          Tenho certeza que os amigos que estão estudando têm conhecimento suficiente pra colocar um botão fechar alí. Meus tutoriais são feitos pra fazer vocês pensarem, não pra copiar e colar.

        • inside disse:

          A propósito, Luiz, postar duas vezes como sendo pessoas diferentes não adianta.

          • Luiz Lopes disse:

            Agradeço seu retorno, porém acredito que desenvolver um artigo incompleto não agrega a nada. Essa dúvida foi levantada por diversos usuários, por isso acredito que seria interessante postar para o artigo ficar 100%.

            Se o intuito é aprendizado, sugiro você detalhar o código, logo desta maneira entendemos e podemos desenvolver soluções para cada aplicação.

            Se não tem interesse em postar, respeito e só tenho agradecer seu retorno.

            Abração….

  13. Thiago OK! disse:

    Muito bacana o tutorial, era o que precisava porem, to com uma duvida ai de como colocar o botão fechar no código, não entendo quase nda de JQuery, to apanhando feio, se alguem tiver uma solução e não se importar de postar eu e creio que várias outras pessoal que podem ver esse tutorial vão agradecer, e muito.
    E mais uma vez, obrigado pelo tutorial. ;)

  14. Luiz Lopes disse:

    Adorei seu Artigo, porém tentei por diversas vezes inserir o Botão Fechar e Não Funcionada nem com reza brava…rs. Por favor poste o código ou informe com mais detalhe como posso inserir o botão ou o link fechar

    Para esse tutorial ficar 100% só falta fecharmos o Iframe da Janela Modal.

    Aguardo seu retorno. Forte Abraço

  15. David disse:

    Ótima vídeo-aula!

  16. fabricio disse:

    Pó amigos como eu coloco o botão fechar, ta dificil.

  17. Vamos lá galera! Vi esse post agora e também achei interessante!
    Primeiro agradeço ao inside pelo tutorial! Muito bom!

    Vi também que muita gente quer saber como inserir um botão \Fechar\ mas não está conseguindo… aproveitando a função \fechar()\ do williams calado, segue como resolver o \problema\:

    Na página HTML insira:

    function fechar(){
    document.getElementById(‘janela_modal’).style.display=’none’;
    document.getElementById(‘overlay’).style.display=’none’;
    }

    No arquivo \janela_modal.js\ original, as linhas 42 e 43 são:
    (…)
    $(\#overlay\).css(overlayCSS).fadeIn(‘slow’, function(){
    $(\#janela_modal\).append(iframe);
    (…)

    Localize o trecho de código acima e insira, entre as duas linhas:
    $(\#janela_modal\).append(‘Fechar‘);

    Ou seja, antes de inserir (append) o iFrame na janela modal, insira um link simples que chamará a função \fechar()\ do HTML principal.

    Prontinho! É só isso galera!
    A posição do botão penso que vocês podem modificar, certo?!

    Lembrando apenas que todos os créditos da \Janela Modal\ são do \inside\ e a função \fechar()\ é do \williams calado\! Eu apenas dei uma mãozinha pra juntar as duas coisas!

    Abraço a todos e sucesso!

  18. walace disse:

    Galera essa video aula me salvou!!!

    Estava querendo furgir de usar lightbox pois vc acaba ficando meio escravo e sem poder fazer muitas coisas, ainda mais eu que precisava de fazer umas alterações para que ficasse acarado site que estou produzindo…

    Só que acabei me deparando com um problema!

    e gostaria de compartilhar, ao vc abrir e fechar a janela modal fica tudo ok! mais se vc voltar a abrir ocorre um erro por usar o APPEND, ele acaba inserindo uma nova janela modal logo abaixo e assim sucessivamente ao rolar a pagina para baixo vcs poderam notar isso, mais nesse caso tem uma solução.

    que seria usar o EMPTY…
    Que vai ajudar a remover e assim parar esse loop que o APPEND acaba criando
    então para corrigir esse problema fiz a seguinte correção

    function fechar(){
    $(\#modalframe\).fadeOut();
    $(\#janela_modal\).fadeOut();
    $(\#overlay\).fadeOut();
    $(\#modalframe\).empty();
    $(\#janela_modal\).empty();
    $(\#overlay\).empty();
    }

    pra não ficar feio primeiro fiz uns fadeout e ai sim limpei a janela modal com empty para que na proxima abertura ele não faça uma segunda janela modal!

    Valeu novamente pela ajuda!!!

    É lembrando o que nosso amigo Vinicius Zanovelli postou
    não esquecer que a função fechar tem que ser colocada no HTML da pagina principal onde será usada a janela modal.

    Abraço a todos

    • inside disse:

      Obrigado pela contribuição Walace!

    • Walace, eu resolvi usando o “removeChild()”. Fica a opção:
      (função Fechar() da página HTML)

      var _janela = document.getElementById(‘janela_modal’);
      var _overlay = document.getElementById(‘overlay’);
      var _iFrame = document.getElementById(‘modalframe’);
      var _botaoF = document.getElementById(‘botao_fechar’);
      _janela.removeChild(_botaoF);
      _janela.removeChild(_iFrame);
      _janela.removeChild(_overlay);

      Abraço a todos e sucesso!

  19. André disse:

    Pessoal, ainda no assunto “fechar” eu só consegui resolver com essa function:

    function fechar(){
    window.parent.document.getElementById(‘overlay’).parentNode.removeChild(window.parent.document.getElementById(‘overlay’));
    window.parent.document.getElementById(‘janela_modal’).parentNode.removeChild(window.parent.document.getElementById(‘janela_modal’));
    }

    Show de bola o modal, valeu!

  20. Leandro Fontolan da Silva disse:

    PessoALL…. Help …..

    Estou trabalhando com uma simples leitura de banco com JSP e o resultado estou montando uma lista de Notícias…. Ex..

    out.println(“”);
    out.println(“” + titulo + ““);
    out.println(“”+conteudo+”");
    out.println(“Data: 01/01/2012 | 20 acessos | Notícias”);
    out.println(“”);
    out.println(“”);

    Estou trabalhando com o elemento — id=’layoute’– no arquivo janela_modal.js… Ex: $(“#layoute”).click(function()…

    O modal está sendo chamado apenas para o primeiro registro.. para os demais registros não é chamado o modal…… pq o id=’layout’ é duplicado..triplicado etc…. Como poderia resolver o problema???

    Muito Obrigado

  21. Icaro disse:

    P/ quem teve alguma dificuldade com o “fechar”.
    Um artigo bem mais didático e que mesmo assim faz vc pensar e entender todo o código: http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/

  22. como foi resolvido para que o efeito não ficasse para todos os links?
    abraços.

Agora é a sua vez: