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??
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.
March 10th, 2010 at 11:26 am
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
March 11th, 2010 at 2:26 pm
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
March 11th, 2010 at 11:19 pm
Qual estratégia vcs estão utilizando caso o modal redirecione para uma página que tenha inputs de texto e precise ser validado?
March 16th, 2010 at 5:34 pm
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.
March 20th, 2010 at 2:09 am
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
March 26th, 2010 at 2:46 pm
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
May 3rd, 2010 at 7:33 pm
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.
June 24th, 2010 at 2:15 pm
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.