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>
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 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>
// 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>
// 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>
// 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>
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 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>
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>
// 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>
// 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>
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>
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>
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>
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”
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
March 12th, 2009 at 1:35 pm
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
March 12th, 2009 at 10:11 pm
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
March 12th, 2009 at 10:48 pm
Tudo bem, aguardo ansioso.
[]s
April 7th, 2009 at 5:12 pm
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
April 21st, 2009 at 3:12 pm
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.
April 21st, 2009 at 3:14 pm
se puder passa um tuto de como vc fez aquele teu portifolio pq ficou muito louco.
causou uma grande impressao.
valeu!
April 26th, 2009 at 7:05 pm
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)..
April 29th, 2009 at 12:15 pm
Cara, muito obrigado!!!
Foi muito útil pra mim.
Valeeeu!
May 2nd, 2009 at 12:52 am
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?
May 12th, 2009 at 1:04 am
mmuito legal seu modal, mas nao esta rolando a tela de fechar apos escurecer a tela, se puder me ajudar, mim@williansmartins.com
May 12th, 2009 at 12:50 pm
Não funciona para abrir uma imagem direto? Precisa necessariamente um arquivo html? Só falta isso pra ficar perfeito.
May 20th, 2009 at 9:14 am
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?
May 20th, 2009 at 11:00 am
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.
May 27th, 2009 at 12:16 am
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
June 2nd, 2009 at 3:51 pm
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.
July 14th, 2009 at 9:17 pm
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.
August 21st, 2009 at 4:43 pm
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.
August 28th, 2009 at 8:42 pm
Para trabalhar com formularios?
August 30th, 2009 at 6:45 pm
Valew pelo Modal, estava precisando a muito tempo. Mas gostaria de uma ajuda pois não esta funcionado o link para fecha-lo.
September 24th, 2009 at 10:48 am
nossa ta procurando isso ..
parabens ..
vou coloca no meu site de uma radio …
September 28th, 2009 at 2:04 pm
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?
September 28th, 2009 at 4:47 pm
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.
September 29th, 2009 at 12:43 pm
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?
September 30th, 2009 at 2:34 pm
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.
September 30th, 2009 at 3:28 pm
No Chrome não está funcionando localmente, apenas no internet explorer. Tem alguma solução? Aguardo Respostas.
October 15th, 2009 at 5:11 pm
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.
November 1st, 2009 at 11:22 pm
Danilo, esse modal me salvou a pele duas vezes essa semana… muchas gracias!
November 4th, 2009 at 9:01 pm
[...] rapidinho aqui para fazer um jabá do plugin para fazer janelas modais com jQuery que o Tidbits disponibilizou. O plugin foi feito pelo Danilo e mais alguns colegas, depois de terem [...]
November 18th, 2009 at 10:27 am
vc pode disponiblizar os arquivos de um exemplo com se html css e o java script???
December 22nd, 2009 at 12:02 pm
Não funciona o modal.
Só localmente.