Janela Modal com jQuery Lightbox para HTML, Video ou IMG

/ BLOG, Como fazer

» Explicação retirada do Blog do Maujor (Vale acompanhar!)

Tutorial: técnica para criar uma janela modal com jQuery.

O script desse efeito, seleciona todos os elementos a (links) cujo atributo name tenha sido definido com valor “modal” e mostra em uma janela modal(estilo lightbox) o conteúdo do DIV cujo id tenha sido definido no atributo href do link. jQuery realmente simplifica e torna fácil as coisas. Dê uma olhada nos exemplos que eu desenvolvi para demonstrar a técnica. Eles me parecem bem interessantes.

btnDemonstracao Download

Não sabe o que é uma janela modal lightbox?

Explico: sabe quando entramos em algum site e abre automaticamente uma “janelinha” por cima do conteúdo, as vezes com um texto simples, outras vezes com um formulário, outras com uma chamada ou um banner de desconto, ou alguma promoção? Então, essa janelinha que abre é uma janela modal, também chamada de lightbox.

Caso você não saiba o que é uma janela modal, você pode visualizá-la na página de demonstração acima.

O autor usa no seu website o facebox (inspirado no facebook). Outros, tais como, lightbox, thickbox, multibox, litebox…… e muitos outros destinam-se a obter a janela modal, cada um deles com suas funcionalidades particulares.

Vamos ao nosso exemplo. Eu mostrarei como criar uma janela modal para apresentar o conteúdo do div cujo id é definido no atributo href do link, conforme dito anteriomente.

Os objetivos são :

  • Procurar em todo o documento o(s) elemento(s) a (link) com o atributo name="modal"e a ele(s) atribuir o evento click para disparar a ação de mostrar, em uma janela modal, o conteúdo do div cujo id é definido no atributo href do link.
  • Criar uma máscara que preencha toda a tela.
  • Criar uma janela modal que seja simples e fácil de modificar.

1. Marcação HTML e atributos do elemento a

<!-- #dialog é o id do DIV definido como mostrado a seguir  -->
<a href="#dialog" name="modal">Janela Modal Simples</a>

<div id="boxes">

<!-- #personalize sua janela modal aqui -->

<div id="dialog">
<b>Teste de Janela Modal</b>

<!-- Botão para fechar a janela tem -->
<a href="#">Fechar [X]</a><br /><br>Janela Modal Simples<br />  <br>Aqui vai o conteúdo da sua Janela Modal Simples.<br></div>

<!-- Não remova o div#mask, pois ele é necessário para preencher toda a janela -->
<div id="mask"></div>
</div>

2. CSS

<style>/* O z-index do div#mask deve ser menor que do div#boxes e do div.window */
#mask {position:absolute;
z-index:9000;  
background-color:#000; 
display:none;
}

#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

/* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */
#boxes #dialog {
width:375px;
height:203px;
</style>
}
/* posiciona o link para fechar a janela */
.close {
display:block; 
text-align:right;
}  
</style>

3. JavaScript

<script type="text/javascript">
$(document).ready(function() {

//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();

//armazena o atributo href do link
var id = $(this).attr('href');

//armazena a largura e a altura da tela
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Define largura e altura do div#mask iguais ás dimensões da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});

//efeito de transição
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//armazena a largura e a altura da janela
var winH = $(window).height();
var winW = $(window).width();
//centraliza na tela a janela popup
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//efeito de transição
$(id).fadeIn(2000);
});

//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
$('#mask, .window').hide();
});

//se div#mask for clicado
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>


Os códigos são diretos e de fácil entendimento. Não se esqueça de linkar para a biblioteca jQuery ao documento.


btnDemonstracao Download


4. Conclusão


É isso, e somente isso, que você precisa saber para criar uma janela modal simples. Neste tutorial eu ensinei como apresentar o conteúdo de um div dentro de uma janela modal. Você pode aplicar os conceitos aqui mostrados para criar o efeito de mostrar uma galeria de imagens dentro de um iframe.


Para aqueles que estão em busca de uma janela modal totalmente personalizável, esta técnica que eu mostrei é perfeita. Dúvidas e contribuições? Poste nos comentários. Obrigado por ler.


Créditos: Author: Kevin Liew | Tradução: Maujor

URL do artigo original em inglês: https://www.queness.com/post/77/simple-jquery-modal-window-tutorial


5. Mais Efeitos Adicionais Abaixo







Modal centralizado na vertical e horizontal


Olá galera. Verifiquei uma coisa chatinha nesse script jquery, é que se a pagina tiver barra de rolagem e o link estiver na parte inferior da pagina. Eu tinha resolvido isso trocando o atributo position da div #boxes de absolute para fixed. Funcionou perfeitamente no Firefox e outros navegadores de compilação similar, porém no Internet Explorer ainda assim apresentava erro na aparição da janela modal. Seguindo o conselho Fernando e do Adriano Mota, adaptei o script para que acontecesse o seguinte.

Quando clicado no link, irá aparecer na tela a janela modal centralizada verticalmente e horizontalmente, idependente do navegador e independente da posição do link na página, quando a janela modal estiver aberta e você rolar a pagina para baixo, ela permanecerá em vista acompanhando a rolagem da página, e ao clicar fora da janela modal ou no botão fechar dela, um efeito fadeOut acontecerá.


O script completo ficou assim:


$(document).ready(function() {$(‘a[name=modal]’).click(function(e) {e.preventDefault();var id = $(this).attr(‘href’);var maskHeight = $(document).height();var maskWidth = $(window).width();$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});$(‘#mask’).fadeIn(1);$(‘#mask’).fadeTo(“slow”,0.5);var left = 0;var top = 0;var winH = $(window).height();var winW = $(window).width();var dialogHeight = $(“#dialog”).height();var dialogWidth = $(“#dialog”).width();if ($.browser.msie) {left = document.body.scrollLeft || document.documentElement.scrollLeft;top = document.body.scrollTop || document.documentElement.scrollTop;} else {left = window.pageXOffset;top = window.pageYOffset;}var topW = top + winH/2- dialogHeight/2;var leftW = left + winW/2- dialogWidth/2;$(id).css(‘top’, topW);$(id).css(‘left’, leftW);$(id).fadeIn(1000); });$(‘.window .close’).click(function(e){e.preventDefault();$(‘#mask’).fadeOut(1000);$(‘.window’).fadeOut(1000);});$(‘#mask’).click(function(){$(this).fadeOut(1000);$(‘.window’).fadeOut(1000);});});


Lembrando que na folha de estilo css você deve alterar a div #boxes .window, para o seguinte:


#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}


E a div #boxes .dialog , e indico controlar o tamanho da janela modal nesta div, com os atributos


#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}


Em Width e Height você controlará o tamanho, indico usarem porcentagem.






Como abrir janela lightbox ao entrar na página do site


Código para iniciar a página sem o uso de um botão, carregando a modal ao entrar na página:


function openModal(id) {

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});

//transition effect
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”, 0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css(‘top’, winH / 2 – $(id).height() / 2);
$(id).css(‘left’, winW / 2 – $(id).width() / 2);

//transition effect
$(id).fadeIn(2000);

$(‘.window .modalClose’).click(function (e) {
e.preventDefault();

$(‘#mask’).hide();
$(‘.window’).hide();
});

$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});

}

$(document).ready(function() {

$(‘a[name=modal]’).click(function(e) {
//Cancel the link behavior
e.preventDefault();
openModal($(this).attr(‘href’));
});

openModal(‘#dialog’);

});






Acompanhar a tela se a pessoa mexer no scroll:


Mudar a div para:


#boxes .window {
position:fixed;
bottom: 0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}


 


		
		
			




	




	        			

			
		
	



	


	
 
	


	



WhatsApp Chat