Click Modal 1.0 – Plugin de jQuery para fazer modal / lightbox

Clique aqui para ver o modal.

Sobre o Modal

Este modal, com o objetivo de ser simples, completo e cross browser (é claro), foi desenvolvido por eu (Danilo Augusto) , André Machado, que também propôs a idéia e o Fabio Vieira (DJ Marquee) ambos programadores de interface da AgênciaClick, com base em uma função de modal do Rodrigo Castilho (ex Coordenador / Programador de interface da AgênciaClick) para nós mesmos utilizarmos no dia a dia do nossos trabalhos e projetos.

Já utilizamos outros modais mas todos eram limitados ou muito complexos e pesados então decidimos fazer o nosso. Funciona como um plugin de jQuery comum, tem apenas 2kb e uma série de opções.

Opções do Modal

Opção O que é? Padrão
url o link da página que será carregada # ou o href do link
backgroundColor a cor de fundo do modal #000 (preto)
backgroundOpacity nível de opacidade 0.5 (50%)
referencePosition Objeto de referência para posicionamento this
top Nos modais com posicao relativa / absoluta pode ser ajustado o top (em pixels) 0
left Nos modais com posicao relativa / absoluta pode ser ajustado o left (em pixels) 0
closeEsc O modal é fechado quando pressionada a tecla esc. true
closeClickOut O modal é fechado quando clicado fora da área da janela do modal false
autoOpen O modal é aberto automaticante quando a página é carregada ( onload lightbox ), não precisa de click. false

O André Machado está trabalhando para oferecer mais opções como “confirm” e galeria de imagens nas próximas versões.

Como Invocar

Primeiro chame o jQuery e o script do modal:

<script type="text/javascript" src="http://www.tidbits.com.br/download/_scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://www.tidbits.com.br/download/_scripts/modal/jquery-modal-1.0.pack.js"></script>

Aqui está disponível o jQuery, o Click Modal 1.0 compactado, o Click Modal 1.0 NÃO compactado e o script de exemplos que foi usado nessa página.

Também baixe a imagem de loading (load.gif) que deve ficar dentro de uma pasta img ou então altere isso no script original. (na próxima versão vai ser possível escolher uma imagem de load ).

Detalhe importante:

Como o evento de modal é atribuído ao elemento, a chamada do modal, deve estar ou depois do html, ou com onload. Para fazer com onLoad, coloque dentro o código do modal dentro do famoso });
Veja o exemplo:

$(document).ready(function(){
$('a#exemplo').modal();
});

Depois coloque as seguintes linhas de código no seu CSS:

/* MODAL */
.load { position: absolute; top: 50%; left: 50%; width: 88px; height: 78px; margin: -39px 0 0 -44px; z-index: 99999;}
.bg_modal { position: absolute; top: 0; left: 0; z-index: 99998; }
.view_modal { position: absolute; left: 50%; top: 50%; text-align: left; z-index: 99998; }
.modal { visibility: hidden; cursor:pointer; }

O modal deve vir com visibility hidden no css pra não correr
o risco de clicar antes de carregar a página inteiramente e não carregar o modal.

Para colocar um botão de fechar no modal, coloque um rel=”modalclose”

<a href="#" rel="modalclose">
Fechar
</a>

Exemplo Simples

Exemplo:

// Javascript
$('a#exemplo').modal();

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo Simples
</a>

Exemplo Simples

Com esse exemplo simples, existe uma forma de invocar o modal sem usar javascript, é só colocar rel=”modal”.

Exemplo:

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal" rel="modal">
Exemplo Simples
</a>

Exemplo Simples

Exemplo com botão

Não é obrigatório o modal ser atribuído a um link (embora recomendado).
A função modal pode ser atribuído a outros elementos.
Por padrão a url que o modal carregal é o href o elemento, mas caso o modal não seja atríbuído a link, é possível atribuir uma url na função modal

Exemplo:

// Javascript
$('button#exemplo').modal({
url:'http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo com botão
</a>

Exemplos com background color

É possível escolher a cor de background do modal alterando a propriedade backgroundColor

O valor default dessa propriedade é #000000 (preto)

Exemplos:

// Javascript
$('a#exemplo').modal({
backgroundColor:'#ffff00'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
#ff0000
</a>

#ffff00 (amarelo)

// Javascript
$('a#exemplo').modal({
backgroundColor:'#0000FF'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
#0000FF
</a>

#0000FF (Azul)

// Javascript
$('a#exemplo').modal({
backgroundColor:'#FF0000'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
#FF0000
</a>

#ff0000(Vermelho)

Exemplos de opacidade no background

A opacidade do background do modal pode ser configurada como parâmetro adicional.
Como padrão, a opacidade é 0.5 (50%), mas pode ser configurada entre 0 (sem opacidade) a 1 (fundo preto)

Exemplos:

// Javascript
$('#exemplo').modal({
backgroundOpacity: 0
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo sem opacidade
</a>

Exemplo sem opacidade

// Javascript
$('#exemplo').modal({
backgroundOpacity: 0.2
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Fundo claro
</a>

Fundo claro

// Javascript
$('#exemplo').modal({
backgroundOpacity: 0.7
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Fundo escuro
</a>

Fundo escuro

// Javascript
$('#exemplo').modal({
backgroundOpacity: 1
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Fundo preto
</a>

Fundo preto

Exemplo de posicionamento

Como padrão o modal vem sempre centralizado na tela, mas é possível posicioná-lo num lugar
específico da página.

Exemplos:

// Javascript
$('#exemplo').modal({
position: 'relative'
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo posicao relativa ao link
</a>

Exemplo posicao relativa ao link

Exemplo com referência

A referência é usada quando a position do modal é relative.
Nesse caso, é possível colocar uma referência no modal, ou seja, em cima de onde o modal será posicionado.
Como padrão, a referência é o próprio link / button que chamou o modal (como no exemplo acima), mas é possível colocar qualquer objeto como referência, nesse caso, vamos colocar como referência o começo dessa div.

Exemplo:

// Javascript
$('#exemplo').modal({
position: 'relative',
referencePosition: $('div#exemploReferencia')
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo posicao relativa à um elemento
</a>

Exemplo posicao relativa à um elemento

Exemplos com top e left

Top e left são opções para ajustar o modal exatamente no local desejado.
Além de poder passar uma referencia, é possível escolher o quanto o modal deve ficar mais pra baixo ou mais pra esquerda da referência (valores em pixels).
Por default, os valores de top e left são 0;
Nesse caso, vamos colocar como referência o começo desse exemplo (esse box cinza).

Exemplo:

// Javascript
$('#exemplo').modal({
position: 'relative',
referencePosition: $('div#top_left'),
left:30
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo com left: 30
</a>

Exemplo com left: 30

// Javascript
$('#exemplo').modal({
position: 'relative',
referencePosition: $('div#top_left'),
top:40
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo com top: 40
</a>

Exemplo com top: 40

// Javascript
$('#exemplo').modal({
position: 'relative',
referencePosition: $('div#top_left'),
top:20
left: -50
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo com top: 20 e left -50
</a>

Exemplo com top: 20 e left -50

Exemplos com top e left sem referência

Nesse caso, podemos colocar o modal em cima / ao lado, embaixo do link que o chama.

Exemplo:

// Javascript
$('#exemplo').modal({
position: 'relative',
left: 250
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Exemplo com left 250 sem referência
</a>

Exemplo com left 250 sem referência

Desabilitando o ESC

A tecla esc serve para fechar o modal quando está aberto.
É possível desativar essa funcionalidade setando a opção closeEsc como false;

Exemplo:

// Javascript
$('a#exemplo').modal({
closeEsc:false
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
Desabilitando o ESC
</a>

Desabilitando o ESC

Exemplo com closeClickOut ativo

Com o closeClickOut ativo, quando o modal quando está aberto, ao clickar fora da área do modal,
ele fecha automaticamente.

Exemplo:

// Javascript
$('a#exemplo').modal({
closeClickOut:true
});

<!-- HTML !-->
<a id="exemplo" href="http://www.tidbits.com.br/download/exemplos/modal/exemplo_modal.html" class="modal">
closeClickOut ativo
</a>

closeClickOut ativo

Observações

Como trabalhamos com ajax, é possível enviar informações via GET na URL.
Aceita javascript dentro do seu conteúdo.
O modal trabalha invocando uma div e não um iframe.

Bugs?

28/10/2008 – Bug corrigido ao invocar diversos modais com rel=”modal”

137 thoughts on “Click Modal 1.0 – Plugin de jQuery para fazer modal / lightbox

  1. Danilo, não seria melhor fazer o css do bg_modal com WIDTH:100% e HEIGHT: 100%?

    Como no IE6 não funciona a altura em % podemos fazer esse hack:

    * html .bg_modal {
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);
    }

    No seu plugin eu tiraria a parte que está comentada e colocaria um verificador do IE6:

    // verificando se o body é menor do que o screen
    //var altura = $(‘html’)[0].scrollHeight < $(window).height() ? $(window).height() : $(‘html’)[0].scrollHeight;
    //$(‘.bg_modal’).width($(‘html’)[0].scrollWidth).height(‘100%’);

    if (typeof document.body.style.maxHeight === “undefined”) {
    $(“body”,”html”).css({height: “100%”, width: “100%”});
    $(“html”).css(“overflow”,”hidden”);
    }

    Dessa forma, podemos usar todo o potencial da % nos browser atuais, sem deixar de funcionar na MER** do IE6!

    Fiz isso, depois que tive problemas com F11 no IE e no Firefox.

    O que você acha?

    Abs

  2. Olá Maicon, essa foi só a primeira versão do modal, o André Machado fez uma alteração pra calcular isso. Além de diversas novas opções, quando o projeto estiver finalizado eu posto aqui novamente.

    []s

  3. Danilo,

    Fiz alguns exemplos aqui e funcionou corretamente, mas somente quando abro um .aspx, se abro um .htm no modal não funciona de jeito nenhum, o modal abre mas não aparece nada, você tem alguma dica?

    Obrigado

  4. vc poderia me dar uma exemplo de uma pagina pois nao estou conseguindo.
    me desculpe mas nao sou muito bom jquery.
    criei os dois arquivos js com o codigo que peguei ai no site. tambem a pasta img com a figura load um css com aquele codigo que vc disse pra colocar em um css. ai uso um dos exemplos do site mas nao dá certo.
    abre uma pagina grande sem nada com a figura load aparecendo em cisa da window que nao tem nada dentro e tem o tamanho da pagina.
    se puder me ajudar desde já eu agradeço.
    e quero dizer que foi um otimo trabalho que vc fizeram.

  5. se puder passa um tuto de como vc fez aquele teu portifolio pq ficou muito louco.
    causou uma grande impressao.
    valeu!

  6. Oi Danilo td bem?

    Parabens pelo tutorial!

    Estou com um problema, acontece assim, copiei os codigos de js,css a imagem e tals, criei uma pagina index.html e nela coloquei um link pra chamar outra pagina , igual ao do Exemplo Simples (o primeiro exemplo), soh q qdo clico no link ele apenas abre a pagina e nao acontece nenhum efeito!
    O q esta errado?
    na index estou chamando os todos os js`s (tirei o arquivo de css, pois nao estava aparecendo o link na pagina)..

  7. Olá, gostei muito de seu plugin, mas estou querendo fazer um clique dentro da janela e quero abrir-lá dentro do plugin, mas não estou conseguindo. Poderia me ajudar?

  8. Não funciona para abrir uma imagem direto? Precisa necessariamente um arquivo html? Só falta isso pra ficar perfeito.

  9. Danilo, sou novo em jquery, porém gostei muito desse trabalho. Tenho uma dúvida: Como faço para em vez de carregar um link, eu carregar o conteúdo de determinadas divs na mesma página?

  10. Como uso o modal com links dinamicos criados no php. Meus arquivos são em php e geram uma lista de links que fazem referencia aos registros. Quando clico nos links ele retorna na janela só o registro do primeiro link. Passo os parâmetro pelo próprio link via GET.

  11. Olá, mt bom esse plugin, parabens!
    porem eu usei ele pra abrir um pequeno form de contato, e ao dar o submit nesse form, ele reabre a pagina de tras e nao da submit. sab o q eh isso?

    obrigado

  12. Boa tarde pessoal, estou estudando jQuery porque acho ser uma biblioteca fascinante. Tentei seguir os exmplos do Danilo, infelizmente não produz nenhum efeito. Será que devo ter na maquina local todos os arquivos?
    inclusive o pacote jquery-modal-1.0.pack.js?

    Agradeço vossa ajuda.

  13. Boa noite, gostaria de saber se existe alguma solução para executar o modal a partir do flash.

    Já achei tutoriais na internet que explicam como fazer isso com o Lightbox.

    Exemplo:
    ————————
    No meu botão no flash coloco:

    getURL(“javascript:showFoto(‘paginaexemplo.html’);”, “_self”);

    Na página onde está o arquivo swf chamo uma função:

    function showFoto(src)
    {
    //criando um link falso, para o LightBox captar as informações
    var a_false = document.createElement(“A”);
    a_false.rel = “lightbox”;
    a_false.href = src;
    //chamando a função do lightbox responsável pelo início das ações
    myLightbox.start(a_false);
    //anulando o link
    a_false = null;
    }

    Enfim, tem como fazer o mesmo com o modal? Creio que muitos tem essa dúvida, Obrigado.

  14. Olá…estou fazendo um modal para meu site e estou com a mesma duvida do Guilherme.
    Como eu poderia chamar as ações jquery apartir de botões em flash?

    Agradeço a atenção e parabéns pelos ótimos conteúdos disponiveis no site.

  15. Valew pelo Modal, estava precisando a muito tempo. Mas gostaria de uma ajuda pois não esta funcionado o link para fecha-lo.

  16. Estou tentando implementar os exemplos aqui, porém da um erro:

    $(‘a#exemplo’).modal is not a function

    Já incluir o jquery.js o modal.js e tudo mais continua dando o erro a carregar a página.
    Alguém tem idéia do que está errado?

  17. Cara ficou mt bom, mas infelizmente so funcionou no meu servidor local. Quando eu envio os arquivos pro server ele nao carrega a pagina apenas escurece o fundo.

  18. Parabéns pelo plugin! Tenho uma situação em que preciso que o modal apareça somente uma vez assim que a página inicial do meu site carregar e que se o usuário aceitou os termos e condições para acessar o site o modal não precise aparecer novamente caso o usuário clique no link Página Inicial. Alguma luz?

  19. Olá Danilo! seguinte, ao colocar os .Js na minha maquina, o efeito para de funcionar! já alterei o caminho deles na pagina, mas percebo que quando eu coloco o CSS ao executar a pagina o link nao aparece. Aguardo Respostas.

  20. No Chrome não está funcionando localmente, apenas no internet explorer. Tem alguma solução? Aguardo Respostas.

  21. Ola Danilo.

    Estava querendo usar esse modal como sendo um loader… Quando inicia a requisição ele joga a camada por cima bloqueando o click do usuario e quando a requisição ajax do jquery terminar ele remove… será que poderia me ajudar a implementar dessa maneira ja que tenho que usar algum elemento pra fazer a chamada.

  22. Pingback: Chris B. – idéias e pensamentos » Plugin jQuery para criar janela modal

  23. Ola,

    como faço para colocar o modal ao clicar em um link , na hora de carregar a pagina aplicar o modal, hoje abro pinha pagina assim.
    function navegar(secao, parametro){
    var secao = secao;
    if (secao == secao)
    document.location.href = ‘?go=’+secao;
    }

    queria que antes de abrir a pagina aplicase o modal em cima

  24. Ola,

    tem como aplicar o modal na hora de carregar a pagina, aplicando o modal e imagem carregando ao carregar a pagina remover o modal automatico.

    Ademir
    Floripa

  25. Qual estratégia vcs estão utilizando caso o modal redirecione para uma página que tenha inputs de texto e precise ser validado?

  26. Olá!

    Estou com um problema no jquery-modal, talvez possas ajudar.

    Tenho uma página que lista imagens que são visualizadas via modal(), além de dois botões onde cada um exibe um confirm() diferente. As mensagens de confirmação são exibidas X vezes, onde X é a quantidade de modais que abri dentro da página. Ou seja, se abri três modais ao clicar no botão surgem três mensagens de confirmação uma atrás da outra.

    Depurei via Google Chrome tanto no Windows como no Linux e obtive o mesmo comportamento. Tentei controlar o fluxo, mas parece que após abrir o modal todas as variáveis globais do script parecem perder seus estados, é muito estranho.

    Outra alternativa foi chamar o js via href num link. No Chrome parece ter resolvido, mas no Firefox não. Suspeito que o jquery esteja se intrometendo nos eventos…

    Grande abraço.

  27. nao estou conseguindo fazer caregar o modal junto com a pagina, pode me ajudar.

    quero q quando eu entre na pagina ela ja me abra o modal sem ter q clicar em nada.

    obrigado

  28. Oi danilo… seu codigo é perfeito pro que eu preciso .. só quando subo ele pro ftp a pagina dentro da modal não abre… a modal funciona o fundo fica preto .. mas a pagina não abre.. sendo que local funciona… preciso muito que me ajude… é urgente…

    abraços

  29. Prezado Danilo, segui as instruções do tutorial e nos testes que fiz off-line funcionou perfeitamente.

    No entanto, quando subi os arquivos a janela modal abre o background mas o conteúdo da página html a ser publicado não aparece.

    Fiz uma pequena modificação nas linhas do estilo CSS, como segue abaixo:

    .bg_modal { position: absolute; top: 0; left: 0; z-index: 99998; }
    .view_modal { position: absolute; left: 28%; top: 34%; right: 32%; text-align: left; z-index: 99998; }
    .modal { visibility: hidden; cursor:pointer; }

    O que pode estar errado?

    Abraços e parabéns pelo conteúdo de seu blog.

  30. Boa tarde Danilo.
    Muito bom, mas estou com um problema.
    Se eu testo com a sua url o modal funciona perfeito, mas se eu chamo a minha url ele nao abre nada, fica apenas em branco. Tem alguma idéia do que possa ser ou como possa resolver?

    Grata.

  31. Olha so amigo: Já tentei esse tal modal ai de vários outros sites mas nenhum dá certo. Você não ensina como aplicar isso em um bloco de notas e salvar como arquivo.htm pra gente ver se vai dar certo.
    Você só fala dos codigos mas não explica onde inserir.
    Dá uma força ai pra galera menos instruída. Não são todos que entendem tudo perfeitamente como vocês.

  32. Pingback: Alertas, Mensagens e Modal com Jquery | Esdras Tavares

  33. Cara..
    to tentando usar seu script..

    to tentando abrir uma página q tem um form.. e esse form tem um outro script JQuery..

    mas dentro do modal ele nao executa… vc sabe me dizer se tem algum jeito de fazer ele executar?

    agradeço imensamente a atenção

    []s

  34. Estou tentando implementar este modal, mas não estou conseguindo. Há a possibilidade de disponibilizar um exemplo para donwload?

  35. Galera, nao consegui usar ! ;S

    eu quero igual quando entra no site …

    alguem pode me ajudar ?
    vlw

  36. Parabéns e obrigado pela disponibilização das rotinas.

    Dúvida: O gif animado que é aberto antes da janela, não está abrindo no lugar correto no Croma e Firefox e como consequencia ele tambem não apaga… o numero de vezes que clicar no link é o numero de gif que fica no final da pagina….

    Tem solução conhecida ?

  37. Olá bom dia, primeiramente parabéns pelo moldal muito bom.

    Bom sou estudante de TI e curioso no meio Webdesign será que vc poderia me esclarecer com fazer este onlod em um tutorial mas fácil tenho muitas duvidas referente ao como chamalo fiz exatamente como disse no tutorial acima mas não chama o onload veja onde vai este codigo

    $(document).ready(function(){
    $(‘a#exemplo’).modal();
    });

    eu o coloquei no mas deu erro de cintax

    também não onde vai este codigo

    Fechar
    será que poderia me esclarecer por favor

  38. Como faço para pegar um valor vindo da janela???, dentro do arquivo que é carregado com o jquery, tenho um iframe que carrega um arquivo de upload, que quando carregado deve informa ao arquivo que contem o iframe que o arquivo foi carregado?? alguém pode me ajudar???

Leave a Reply

Your email address will not be published. Required fields are marked *