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. Muito bom, parabéns, funciona muito bem!
    No meu caso coloquei uma imagem dentro do modal e inicialmente estava desalinhado, mas colocando o width e height dentro dos parametros do CSS .view_modal funcionou perfeitamente, parabéns!

  2. Fica opaca a tela, no Firebug diz que carregou a página, porém não mostra nada na tela !! O que fazer ?

  3. bom dia pessoal,
    estou com um problema, o modal nao está conseguindo ler script dentro da pagina…sabem me dizer o pq?

  4. Bom dia, muito bom esse script.. uso ele e recomento…

    Gostaria de saber se tem como pegar a url pelo link <a que clico com o mesmo id… existe uma maneira de fazer isso ?

    obrigado :D

  5. Boa Tarde, sou estudante e estou iniciando com jquery, poderia me passar o codigo completo com o exemplo para que eu possa entende-lo melhor.

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

    Att.

  6. Simplesmente sensacional meu jovem, testei aqui e funfou blza, apenas tive que modificar o height e width do css e dividir por /2 e setar no margin para centralizar, parabéns e sucesso !

  7. Em como ivocar, vocês escrevem assim “O modal deve vir…” isso causa dúvida, eu trocaria por está ou vem com, enfim… é apenas uma observação.

  8. Muito legal essa modal, utilizei perfeitamente, só q não visualizo no Chrome. Ela parece carregar, mas não aparece. Em todos os outros browsers, ok.

    Algum procedimento?

    Agradeço a ajuda.

  9. Legal ele funciona o exemplo clicando no botão pra abrir mas quanto coloquei pra funcionar o exemplo que carrega automaticamente ele não mostra, poderia mostrar o código exato da pagina mostrando todos os passos pra abrir automaticamente.
    Abraço

  10. Olá pessoal, parabéns pelo script eu gostaria de saber se é possível que essa janela modal se abra em um intervalo de dias ao carregar o site. exemplo:Uma promoção que tenha a duração de 15 dias.

  11. estou usando este plugin para exibir mensagens de erro, tipo: um login consulto via ajax o email e senha e em caso de erro mudo a href do link para erro.php?msg=blabla e invoco o $(id-do-link).modal({}) e ele abre um modal com o erro , porém gostaria de saber como desassociar o .modal() de um id para o link em questao nao abrir a modal numa segunda tentativa do usuario de login com sucesso, por exemplo, pois uma vez associado .modal, o link sempre esta abrindo o modal

  12. Mto bom!

    Mas como passar valores via get?
    ex: modal.php?id=123

    E depois como receber valores do formulário de dentro do modal?

    Tentei aqui e nada deu certo.

    Vlw

  13. Ola, parabéns pelo post e obrigado por nos fornecer o fonte dos mesmo.
    Esta documentação é antiga mas eu a encontrei pelo google e achei simples e direta, e no resumo, comecei a usá-la. Agora ao testar a mesma me veio a seguinte dúvida que eu não consegui resolver:
    Tenho a página de login a pessoa clica no link EMPRESA (por exemplo) ele me abre a listagem de empresa no “modal”, agora deste modal eu quero abrir outro modal dentro dele, ou seja, se eu clicar no primeiro link eu queria que abrisse outro modal com as informações da EMPRESA.
    Já tentei fechar e abrir um novo modal mas ele não abre. Setei outro nome pra ele, aí qudo a pessoa clica na tela de LOGIN abre a listagem de empresas e nesta listagem tem outro nome diferente para abrir no novo modal mas ele não abre o link como um modal.
    Em resumo, eu quero abrir um modal chamado por outro modal, tem como?

  14. Excelente plugin!
    Eu adicionei mais um recurso neste plugin, que é a função “autoClose”, que fecha o Modal automaticamente após um periodo de tempo. quem tiver interesse entrar em contato pelo e-mail citado!

  15. Pingback: Plugin para Modal | Felipe Lambert

  16. Como faço pra fechar o modal automaticamente após um evento via ajax?

    if (sucesso) {
    // fechar modal!!!
    }

  17. Pingback: Click Modal 1.0 – Plugin de jQuery para fazer modal / lightbox | TidBits » Web Design

  18. Boa noite amigo. Estou com uma condicional em meu código, e dentro desta condicional eu gostaria de acionar o modal ex: if y { modal };

    Obrigado pela atenção. Bom fim de semana.

  19. Ola, eu estava pretendendo fazer uma janela abrir, com um player de musica, porem que o mesmo continuasse ativo apos a navegação da pagina…. da pra fazer com modal?

  20. Nao estou conseguindo abri-lo automaticamente ao entrar no site!! Necessito trocar o # na parte da configuração?

  21. como fazer para deixar o modal em uma pagina separada, e chama-lo através de um link em outra página? Já que é chamado através do id. Se puderem me ajudar agradeço.

  22. Estou com um problema. Quando clico no link para exibir meu modal, a tela fica com o modal escuro, aparece a img de carregando, mas após isto não é exibido o conteúdo que eu quero. Alguem pode ajudar?

  23. Cara, estou tendo algum problema relacionado ao background, eu fiz um menu com um botão chamando uma janela modal, e, até aí tudo bem, quando clico no botão abre a janela modal normalmente, mas se eu fecho a janela e abro denovo, e repetir esse processo, a tela vai escurecendo até eu não enxergar nada! Teria como me ajudar ?

  24. ola cara estou com um problema eu fiz minha janela modal e ta tudo certo, mas o problema e que eu tenho 10 botoes, mas na janela so espa abrindo o texto da primeira modal as outras abrem com a mesma mensagem da primeira como posso fazer para passar o valor conforme o click do usuário.

Leave a Reply

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