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.
Lembrando que falta pouco tempo para encerrarem as votações do Prêmio Podcast 2008, vote no Screencaster clicando no banner abaixo:
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!
Postado em: 22/10/2008 @ 12:10 por Guilherme Rambo. Você pode comentar ou enviar um trackback para este post.
Alan Douglas escreveu:
26/11/2008 @ 15:11:48Olá 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
Usandoinside escreveu:
26/11/2008 @ 16:11:52Coloquei os arquivos para download Alan. Obrigado pelo feedback!
UsandoAlan Douglas escreveu:
26/11/2008 @ 16:11:17Valeu… peguei… obrigado
UsandoThiago Albuquerque Severo escreveu:
29/12/2008 @ 14:12:24E 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!
UsandoThiago Albuquerque Severo escreveu:
29/12/2008 @ 16:12:51Ola 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?
Usando