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”
Um simples tab percorre o que estiver abaixo do modal.
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!
O Tab consegue navegar por trás do modal
Onde está o link para baixar ???
Fica opaca a tela, no Firebug diz que carregou a página, porém não mostra nada na tela !! O que fazer ?
bom dia pessoal,
estou com um problema, o modal nao está conseguindo ler script dentro da pagina…sabem me dizer o pq?
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
Affs.. consegui fazer.. bom.. user o rel=’modal’… falta de atencao.. :D
Como faria para passar a href com paramentros? Exemplo: e na API resgatar esse valor?
Olá gostaria de saber se há como
voce mandar uma página completa, ou
os arquivos em .RAR porque aqui
não consegui fazer funcionar esse script
MUITO BOM MANO!
TÁ DE PARABÉNS!!! ;-)
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.
Bom dia.
Alguem por favor me diga a onde esta o link para download???
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 !
Alguem ai pode me dizer o que eu estou fazendo de errado!
quando rodo na IDE ele funciona, quando jogo ele on-line ele da erro “acesso negado”
http://www.mkvsolucoes.com.br/teste.html
se aguem ai puder me ajudar!
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.
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.
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
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.
nao consegui utilizar, pdoeria postar o link para download?
de um exemplo
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
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
Muito bom e prático seu tutorial, já está favoritado!
+1
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?
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!
Pingback: Plugin para Modal | Felipe Lambert
Como faço pra fechar o modal automaticamente após um evento via ajax?
if (sucesso) {
// fechar modal!!!
}
Pingback: Click Modal 1.0 – Plugin de jQuery para fazer modal / lightbox | TidBits » Web Design
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.
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?
Nao estou conseguindo abri-lo automaticamente ao entrar no site!! Necessito trocar o # na parte da configuração?
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.
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?
Não consigo. =| Não sei exatamente onde colocar cada código. Estou usando o DreamWeaver, será que isso influencia?
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 ?
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.
Não tem um banner assim que aparece só uma vez ?