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)
October 21st, 2008 at 9:05 am
Muito legal sua iniciativa. Parabéns.
October 21st, 2008 at 11:49 am
show de bola guri
October 21st, 2008 at 11:55 am
Muito da hora isso.
Ficou realmente bem completo.
Parabéns
October 22nd, 2008 at 3:14 pm
Pronto! já esta no meu delicious
October 28th, 2008 at 7:51 am
Muito bom mesmo, parabéns. Mas uma dúvida. Parece que o código-fonte do script está criptografado. Onde eu altero a imagem do loading?
October 28th, 2008 at 8:06 am
Achei um bug cara. Eu coloco diversos links diferentes para abrir vários ‘modals’ e sempre abre o primeiro apenas… se eu tiver 2 links em 1 pagina, parece que ele só abre o primeiro…
October 28th, 2008 at 11:03 am
Oi Maykel, tudo bem? Eu notei esse bug também, corrigi já, alterei o script aqui (pode baixar) e disponibilizei também a versão sem compactação pra você poder alterar a imagem, a original. Na próxima versão vamos colocar uma opção pra escolher a imagem de loading.
Obrigado pela atenção.
[]s
October 30th, 2008 at 4:41 pm
Olá,
Como eu consigo chamar diretamente o Modal?
Desejo chamá-lo em um evento e não apenas ao clicar de um link, é possível?
grato,
October 31st, 2008 at 9:08 am
Olá fernando, é possível sim… é só chamar com o parametro autoOpen…
faça assim:
$(window).modal({
url:’pagina.html’,
autoOpen:true
});
[]s
November 3rd, 2008 at 1:47 am
cara eu nao entendo muito de javascript, mas eu aprendo facil a partir de exemplo completos..
so que eu nao consigo entender os seus exeplos… vc pode postar um exemplo de uma pagina simples que abra automaticamente o modal??
eu usei algo assim mas nao funcionou:
$(window).modal({
url:’pages.html’,
autoOpen:true
});
obrigado
November 3rd, 2008 at 11:15 am
Rafael, é isso mesmo, só certifique que invocou o código dentro do
$(document).ready(function(){
});
e que chamou os 2 javascripts corretamente. Veja mais na opção “Como invocar”
[]s
November 3rd, 2008 at 4:53 pm
sim eu chamei os 2 scripts so que a parte do:
$(document).ready(function(){
});
eu nao entendi…
vcs podem postar um arquivo de exemplo completo, com head, body, em que o modal esteja funcionando assim fica mais facil a compreenção
obrigado
November 4th, 2008 at 2:25 pm
ufa… agora sim consegui.. eu abri o codigo fonte dessa pagina e achei.. heheh
valew
November 4th, 2008 at 3:08 pm
galera estou com um pequeno problema… estou usando o modal pra abrir um html que (só) tem uma imagem, quando eu abro a pagina o modal aparece descentralizado, e so centraliza se eu der uns 2 refresh
que que eu posso fazer??
obrigado
November 17th, 2008 at 5:04 pm
Estou procurando uma vesao com iframe pra exibir PDF, alguem conhece?
Falow
November 19th, 2008 at 6:17 pm
que que eu tenho a ver com a vida do danilo e belinha??
so quero saber jquery porra !! !
November 19th, 2008 at 8:29 pm
Olá, “espirito de porco” ahahah, sugiro entrar no jquery.com e não no blog do danilo e da belinha.
[]s
November 25th, 2008 at 11:52 am
Rafaela ou Danilo,
Me passa um completo igual a rafaela falou? o meu só fica no “carregando”, mas n abre as paginas
November 25th, 2008 at 7:13 pm
ola amigo, aqui tem:
http://www.tidbits.com.br/download/_scripts/modal/jquery-modal-1.0.js
December 5th, 2008 at 2:53 pm
Danilo, gostaria de saber se tem como abrir uma div no lugar de um endereço? tipo no lugar de eu passar uma url eu passar o nome de uma div que quero que abra no modal.
Abs,
December 5th, 2008 at 5:21 pm
Olá Altamiro, você não pode colocar o div dentro da url?
December 6th, 2008 at 11:31 am
Até posso só que criar um arquivo para colocar apenas uma div com um conteúdo pequeno acho que não teria necessidade disso. É por isso que queria saber se tem essa opção de abrir uma div no modal no lugar da url.
December 6th, 2008 at 3:36 pm
Oi Altamiro, nós estamos desenvolvendo a segunda versão, vamos implementar essa funcionalidade.
=)
[]s
December 10th, 2008 at 10:38 am
Olá, consigo abrir o modal, a imagem está ok, mas ele não chama a url. estou usando assim:Exemplo Simples. Estou usando PHP4. Quando troco no exemplo para exemplo_modal.php ele mostra a frase mas não abre o form branco. Alguém pode me ajudar? Grato
December 10th, 2008 at 4:09 pm
@Marcelo, o form branco é gerado no CSS, é só colocar uma div com fundo branco.
December 11th, 2008 at 12:03 am
Danilo…
Como faço pra associar uma tecla capturada e associá-la ao evento que invoca ao modal?
O que eu queria fazer era que ao pressionar/soltar por exemplo, a tecla “X”, me abrisse o modal…
Estive olhando no código a parte da captura do ESC e estou tentando implementar algo parecido.
Não manjo de jquery…
Gostei muito do script.
T+
December 11th, 2008 at 10:32 am
no jquery-modal-1.0.js troque a linha
$(window).unbind();
por
$(window).unbind(‘click’,openModal);
depois é só aplicar o código num js separado:
$(document).ready(function(){
$(window).keydown(function(event){
if(event.keyCode==88){
$(window).modal({
url:’introducao.html’,
autoOpen:true,
closeClickOut:true
});
}
});
});
December 11th, 2008 at 2:31 pm
Ixi,..
Apesar de não ter entendido, funcionou beleza. Agora vou dar uma estudada por que não sou adepto do capp (copy and paste programing).
Valeu demais e me parece bastante interessante o Jquery embora muitos companheiros da área me aconselham mais o mootools ou o prototype. É questão de ver por aí. E vc, que me diz?
T+
January 3rd, 2009 at 4:48 am
Olá… achei muito interessante e gostaria de implementar em um site que estou desenvolvendo. Como eu faria se tivesse que chamar um form modal de um evento OnSelectedIndexChanged de um drop down list em asp.net?
Obrigado,
Paulo Pilão
January 20th, 2009 at 3:45 pm
Cara, achei um bug no firefox, tenho um site com bastante conteudo em flash, no IE abre corretamente mais no Firefox ele abre por baixo dos flashs
pode me ajudar?
January 20th, 2009 at 6:29 pm
Danilo,
Parabéns ficou DUCA!!
Também tentei usar vários disponíveis na net e são super pesados.
Uma dúvida, por algum motivo quando clico num link chamando o rel=”modal” ele está abrindo normalmente o div só que está deslocando o background para esquerda e criando barra de rolagem em ambos os lados. O que pode estar ocasionando isso?
January 20th, 2009 at 9:23 pm
@Rafael, provavelmente é o wmode do seu flash… coloca ele como transparent
January 20th, 2009 at 9:26 pm
@Ricardo, então.. deve ser o css dentro da div que tem alguma diferença
January 22nd, 2009 at 12:46 pm
Muito bom seu exemplo, preciso de um que seja semi modal, tipo, a popup não impede a edição da janela pai, porém, a mesma nunca fica abaixo da janela pai, conhece algo assim?
January 26th, 2009 at 4:10 pm
amigao
vc salvou minha vida com esse modal, nao conseguia sobrpor todos elementos, mas esse esta certinho
parabens
mas achei um ‘erro’
ele nao ocupa 100% da pagina
se apertar F11 ele nao ocupa a lateral direita
tem alguma dica de como arrumar?
abracos
e parabens de novo pela boa vontade em compartilhar
January 26th, 2009 at 4:22 pm
acho que achei onde dava esse erro, verifica e ve se procede pois o filho é seu
troquei essa linha:
$(‘.bg_modal’).width($(‘html’)[0].scrollWidth).height(altura);
por essa declarando a largura em 100%
$(‘.bg_modal’).width(’100%’).height(altura);
abracos
January 30th, 2009 at 11:11 am
Olá Leandro, tudo bem?
Realmente, nós nunca prevemos tal ação de apertar F11, obrigado por ajudar.
[]s
February 2nd, 2009 at 7:00 pm
Danilo,
Muito bom esse codigo.
Só não consegui fazer uma coisa com ele.
Coloquei um iFrame em um modal para que eu pudesse fazer uma tela de cadastro por cima, com post e tudo. Após isso não consegui usar mais o ModalClose sem redirecionar para a tela inicial. Será q estou fazendo alguma besteira?
Obrigado
February 2nd, 2009 at 10:32 pm
Olá amigo, como está dentro de iframe, é diferente mesmo, coloca assim no link
Fechar
[]s
February 5th, 2009 at 9:08 am
Danilo,
Não sei o q acontece com o meu modal, mesmo referenciando todo js que vc mostra em “Como Invocar”, basta eu fazer uma chamada simples como a que ocorre no Onload da sua pagina…ele me apresenta erro de Js. no proprio arquivo de modal.
Preciso fazer uma entrega e estou somente dependendo de uma abertura de modal no onload, vc pode me mandar ou postar aki um exemplo completo para q eu veja onde esta o meu erro.
Obrigado
Vitor
February 12th, 2009 at 8:04 am
Olá Danilo, Fábio e André (temos q lembrar das outras pessoas q criaram não é?)..
Estou com um problema.. usu o click modal abrindo no centro um html com outros 3 links…
Como fazer para abrir esses outros links tb dentro do modal sem fechá-lo?? Tentei colcoar o class=”modal” rel=”modal” nos links mas nao rola.. e se deixo sem ele sai da página do modal..
Alumia aí
February 12th, 2009 at 8:34 am
Outro detalhe.. Essa tela pai onde tenho o link q abre o modal fica dentro de um iframe e não tenho como retirar pq a janela pai do iframe é outro site..
ou seja..
Site com iframe..
Iframe com link do modal
html q o modal chama tem um form e 3 links..
clicando nos links de dentro do modal tem q abrir o conteúo sem sair do modal.. enviando o form a resposta tem s ser tb dentro do modal
February 12th, 2009 at 10:33 pm
Hey Zenner, não programei nada pra isso ainda… mas… você pode fechar o modal e abrir outro.
February 16th, 2009 at 4:48 pm
Estou usando um modal com botão.
Ele funciona corretamente, mas ao executar o postback no .NET o meu botão some.
Alguém já passou por isso?
Obrigado.
February 17th, 2009 at 10:42 am
Ao tentar rodar com um sistema meu, deu este erro. (uso a ultima versao do JQuery)
ob.toString is not a function
http://localhost/main.php?pgs=contrato
Line 26
February 20th, 2009 at 9:50 am
Também tive esse problema com a última versão do jquery e utilizei a versão sugerida pelo tidbits.com.br
February 27th, 2009 at 1:04 am
Meu problema é que local ele roda bem, no servidor do site ele só abre a tela opaca, não abre a janela. O que ocorre? Alguém pode ajudar?
February 27th, 2009 at 3:24 pm
Gustavo e Carlos, a gente fez o script baseado na versão 1.2.6 do jQuery mesmo.
Agnaldo, não existe nenhuma diferença na programação entre local / servidor, provavelmente o arquivo de load não está sendo encontrado no server.
[]s
March 2nd, 2009 at 12:13 pm
Eu estou rodando esse script com o jquery-1.3.2.js, porém, não estava funcionando o fechar, então troquei essa linha:
/*CLOSE MODAL*/
$(“a[@rel~='modalclose']“).click(function() {
por esta:
/*CLOSE MODAL*/
$(“a[rel=modalclose]“).click(function() {
Tenho verificado que quando teclamos a tecla F11, dá erro, o fundo não preenche totalmente a tela..
abs
March 6th, 2009 at 4:07 pm
Ao executar o postback no modal ele volta a ficar na página e não funciona.
Alguém conhece a solução??