Seguindo nossa série de vídeos sobre jQuery, neste vídeo eu mostro como criar uma janela modal (semelhante à lightbox), usando javascript e jQuery. O vídeo está um pouco mais longo que os outros, mas muito interessante.
Segue o código da função que eu precisei utilizar no vídeo para pegar as dimensões da página:
// getPageSize() // Returns array with page width, height and window width, height // Core code from - quirksmode.org // Edit for Firefox by pHaez // function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; }
Espero que gostem, até mais!
Função fechar():
function fechar() { $("#janela_modal").fadeOut() $("#overlay").fadeOut() }


Olá amigo,
gostei muito da vídeo-aula em relação a Janela Modal mas vc disse que iria disponibilizar os arquivos em um post mas não achei. Tem algum post com os arquivos pra termos acesso?? Abraço e parabéns pelos conhecimentos aqui passados.
Alan
Coloquei os arquivos para download Alan. Obrigado pelo feedback!
Valeu… peguei… obrigado
E ai cara tudo beleza, gostei muito do seu video mas tenho duas dúvidas como faco se em uma mesma pagina eu tiver varios links, notei que ate os links dos grids sao afetados pelo script e o chamam, fazendo assim com que todos os links da pagina chamem o script e eu quero apenas um link em especifico, outra pergunta como faco para inserir um botao fechar para que o ususario possa fechar o modal na hora que ele quiser? agradeco desde já a atencao!
Ola amigo ja consegui resolver o meu problema, mas apareceu outro, como faço para colocoar um botao fechar em cima do modal no canto direito?
Também gostaria de saber como fecho a janela!
os arquivos do tuto nao estao mais disponiveis..pq? o q houve.?
Olá Igor, acabei de corrigir os links
Como coloco o botão fechar ?
Muito show esse vídeo, foi de grande utilidade pra mim, parabéns !
Gostaria de saber como que faz pra incluir o botão fechar.
Aguardo sua ajuda.
Oi Igor! Obrigada pelo tutorial, era o que precisava!
Mas, estou com o mesmo problema que o Thiago teve, os outros links tbém estão com o efeito, só queria em dois botões. Como faço?
Como não vi a sua resposta do botão fechar, tbém gostaria de saber como fazer pra fechar e continuar navegando na página do site.
Agradeço desde já pela ajuda.
Ola pessoal um possivel codigo para o butao fechar!
Butao ———-
[X] Fechar
Codigo ————
function fechar(){
document.getElementById(‘janela_modal’).style.display=’none’;
document.getElementById(‘overlay’).style.display=’none’;
}
Espero ter ajudado, ok
Seria melhor usar as funções do jQuery como fadeOut() ou remove()
Pode ser também Inside, so mostrei para o pessoal quem entende pouco de javascript e quase nada de jQuery, mais essas funções devem ser usadas para manter o padrão, valeuu
Como amigo disse para esse tutorial ficar 100% só falta detalhar no código ou responder para galera como inserir o Botão Fechar.
Eu também tentei várias vezes e nada….Adoro seu artigos e gostaria de finalizar esse exemplo que concerteza será útil para todos.
Tenho certeza que os amigos que estão estudando têm conhecimento suficiente pra colocar um botão fechar alí. Meus tutoriais são feitos pra fazer vocês pensarem, não pra copiar e colar.
A propósito, Luiz, postar duas vezes como sendo pessoas diferentes não adianta.
Agradeço seu retorno, porém acredito que desenvolver um artigo incompleto não agrega a nada. Essa dúvida foi levantada por diversos usuários, por isso acredito que seria interessante postar para o artigo ficar 100%.
Se o intuito é aprendizado, sugiro você detalhar o código, logo desta maneira entendemos e podemos desenvolver soluções para cada aplicação.
Se não tem interesse em postar, respeito e só tenho agradecer seu retorno.
Abração….
Muito bacana o tutorial, era o que precisava porem, to com uma duvida ai de como colocar o botão fechar no código, não entendo quase nda de JQuery, to apanhando feio, se alguem tiver uma solução e não se importar de postar eu e creio que várias outras pessoal que podem ver esse tutorial vão agradecer, e muito.
E mais uma vez, obrigado pelo tutorial.
Adorei seu Artigo, porém tentei por diversas vezes inserir o Botão Fechar e Não Funcionada nem com reza brava…rs. Por favor poste o código ou informe com mais detalhe como posso inserir o botão ou o link fechar
Para esse tutorial ficar 100% só falta fecharmos o Iframe da Janela Modal.
Aguardo seu retorno. Forte Abraço
Ótima vídeo-aula!
Pó amigos como eu coloco o botão fechar, ta dificil.
Vamos lá galera! Vi esse post agora e também achei interessante!
Primeiro agradeço ao inside pelo tutorial! Muito bom!
Vi também que muita gente quer saber como inserir um botão \Fechar\ mas não está conseguindo… aproveitando a função \fechar()\ do williams calado, segue como resolver o \problema\:
Na página HTML insira:
function fechar(){
document.getElementById(‘janela_modal’).style.display=’none’;
document.getElementById(‘overlay’).style.display=’none’;
}
No arquivo \janela_modal.js\ original, as linhas 42 e 43 são:
(…)
$(\#overlay\).css(overlayCSS).fadeIn(‘slow’, function(){
$(\#janela_modal\).append(iframe);
(…)
Localize o trecho de código acima e insira, entre as duas linhas:
$(\#janela_modal\).append(‘Fechar‘);
Ou seja, antes de inserir (append) o iFrame na janela modal, insira um link simples que chamará a função \fechar()\ do HTML principal.
Prontinho! É só isso galera!
A posição do botão penso que vocês podem modificar, certo?!
Lembrando apenas que todos os créditos da \Janela Modal\ são do \inside\ e a função \fechar()\ é do \williams calado\! Eu apenas dei uma mãozinha pra juntar as duas coisas!
Abraço a todos e sucesso!
Galera essa video aula me salvou!!!
Estava querendo furgir de usar lightbox pois vc acaba ficando meio escravo e sem poder fazer muitas coisas, ainda mais eu que precisava de fazer umas alterações para que ficasse acarado site que estou produzindo…
Só que acabei me deparando com um problema!
e gostaria de compartilhar, ao vc abrir e fechar a janela modal fica tudo ok! mais se vc voltar a abrir ocorre um erro por usar o APPEND, ele acaba inserindo uma nova janela modal logo abaixo e assim sucessivamente ao rolar a pagina para baixo vcs poderam notar isso, mais nesse caso tem uma solução.
que seria usar o EMPTY…
Que vai ajudar a remover e assim parar esse loop que o APPEND acaba criando
então para corrigir esse problema fiz a seguinte correção
function fechar(){
$(\#modalframe\).fadeOut();
$(\#janela_modal\).fadeOut();
$(\#overlay\).fadeOut();
$(\#modalframe\).empty();
$(\#janela_modal\).empty();
$(\#overlay\).empty();
}
pra não ficar feio primeiro fiz uns fadeout e ai sim limpei a janela modal com empty para que na proxima abertura ele não faça uma segunda janela modal!
Valeu novamente pela ajuda!!!
É lembrando o que nosso amigo Vinicius Zanovelli postou
não esquecer que a função fechar tem que ser colocada no HTML da pagina principal onde será usada a janela modal.
Abraço a todos
Obrigado pela contribuição Walace!
Walace, eu resolvi usando o “removeChild()”. Fica a opção:
(função Fechar() da página HTML)
var _janela = document.getElementById(‘janela_modal’);
var _overlay = document.getElementById(‘overlay’);
var _iFrame = document.getElementById(‘modalframe’);
var _botaoF = document.getElementById(‘botao_fechar’);
_janela.removeChild(_botaoF);
_janela.removeChild(_iFrame);
_janela.removeChild(_overlay);
Abraço a todos e sucesso!
Pessoal, ainda no assunto “fechar” eu só consegui resolver com essa function:
function fechar(){
window.parent.document.getElementById(‘overlay’).parentNode.removeChild(window.parent.document.getElementById(‘overlay’));
window.parent.document.getElementById(‘janela_modal’).parentNode.removeChild(window.parent.document.getElementById(‘janela_modal’));
}
Show de bola o modal, valeu!
PessoALL…. Help …..
Estou trabalhando com uma simples leitura de banco com JSP e o resultado estou montando uma lista de Notícias…. Ex..
out.println(“”);
out.println(“” + titulo + ““);
out.println(“”+conteudo+”");
out.println(“Data: 01/01/2012 | 20 acessos | Notícias”);
out.println(“”);
out.println(“”);
Estou trabalhando com o elemento — id=’layoute’– no arquivo janela_modal.js… Ex: $(“#layoute”).click(function()…
O modal está sendo chamado apenas para o primeiro registro.. para os demais registros não é chamado o modal…… pq o id=’layout’ é duplicado..triplicado etc…. Como poderia resolver o problema???
Muito Obrigado
P/ quem teve alguma dificuldade com o “fechar”.
Um artigo bem mais didático e que mesmo assim faz vc pensar e entender todo o código: http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/
como foi resolvido para que o efeito não ficasse para todos os links?
abraços.