Criar uma Janela Modal com jQuery

Criar uma Janela Modal com jQuery

Você já deve ter visto isso em vários sites, onde ao entrar neles o ecrã escurece e uma janela aparece exibindo algo em destaque, ou seja uma janela modal…

Neste artigo vamos criar um exemplo onde fazemos exatamente isso, onde definiremos quando e como ira abrir a janela, o conteúdo que queremos que seja visualizado em forma modal vai estar dentro de um elemento (div) e for fim como a janela vai desaparecer.

Este exemplo de janela modal vai ser bem simples mas muito funcional. Ele pode ser usado para gerar alertas ou confirmar mensagens, etc. Esta técnica que vamos mostrar é perfeita para quem procura uma janela modal totalmente personalizável.

O HTML:

<div class="windows-popup">
    <div class="title-popup"><h4>O CriarEstilosNet no Facebook</h4> <div title="Fechar" class="close-popup"></div></div>
    <div class="content-popup">
        <iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fcriarestilosnet&width=292&height=240&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false&appId=354445021294548" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:240px;" allowTransparency="true"></iframe>
        <p>Ajude-nos a crescer!</p>
        <p>Coloque um LIKE na nossa página...</p>
    </div>
</div>
    	
<div class="mask-popup"></div>

O CSS:

.mask-popup{
	display: none;
	background: #000 url(../imagens/fundoModal.png); 
	position: fixed; left: 0; top: 0; 
	width: 100%; 
    height: 100%;
	opacity: 0.8;
    cursor: pointer;
	z-index: 99999;
}
.windows-popup{
    font-family: Arial, Verdana, Helvetica;
	display:none;
	background: #fff url(../imagens/fundoWindow.png);
    border: 2px solid #ddd;
    box-shadow: 0px 0px 20px #000;
	padding: 10px; 	
	position: fixed; top: 50%; left: 50%;
    float: left;
	z-index: 999999;
}
.title-popup{
	max-width: 800px;
	height: 32px;
	margin-bottom: 5px;
}
.title-popup h4{
	float: left;
    margin-top: 7px;
}
.close-popup{
	width: 32px;
	height: 32px;
	background: url(../imagens/fecharModal.png);
	float: right;
	cursor: pointer;
    margin: 0 0 4px 0;
}
.content-popup{
	max-width: 960px;
    height: auto;
	background: #FFF;
    margin: 20px auto 0;
    text-align: center;
}
.content-popup p{
    display: block;
    padding: 10px;
	text-align: center;
    font-size: 1.2em;
}

O Javascript:

//if the isFirst is not set, then show the window popup
var isFirst = sessionStorage.getItem("FIRST-VISIT");
if (isFirst == null || isFirst == 'undefined') {
	sessionStorage.setItem("FIRST-VISIT", "YES");
	launchWindow('.windows-popup');
}
//Close the window popup
$('.mask-popup').click(function() {
	$(".windows-popup").fadeOut();
	$(this).fadeOut(200);
});
$('.close-popup').click(function(ev) {
	ev.preventDefault();
	$('.windows-popup').fadeOut();
	$('.mask-popup').fadeOut(200);
});

function launchWindow(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-popup').css({
		'width': maskWidth,
		'height': maskHeight
	});
	//transition effect		
	$('.mask-popup').fadeIn(1000);
	$('.mask-popup').fadeTo("slow", 0.9);
	//Get the left and top alignments      
	var windowLeft = ($(window).width() / 2) - ($(id).width() / 2);
	var windowTop = ($(window).height() / 2) - ($(id).height() / 2);
	//Set window to center in screen
	$(id).css({
		'top': windowTop,
		'left': windowLeft
	});
	//transition effect
	$(id).fadeIn(1000);
}

Os códigos são quase todos diretos e de fácil entendimento. Não nos podemos esquecer de chamar a biblioteca jQuery no documento.

É somente isso, que precisamos saber para criar uma janela modal simples. Neste tutorial ensinei como apresentar o conteúdo de um elemento (div) dentro de uma janela modal. Mas podemos aplicar os conceitos aqui mostrados para criar o efeito de mostrar imagens, iframe, vídeos, etc.

Dúvidas e contribuições? Comentários. Obrigado por ler!

4 Comments

  • Como eu faço para fazer uma janela dessa para link a pessoa no link telefone e aparece uma janela dessa com o numero? Obrigada

  • Você pode usar o que quiser na janela modal… no exemplo chamamos os dados do Facebook, mas você pode fazer com que o script leia a sua base de dados e apresente os dados de usuários por exemplo… terá de criar uma função para efectuar essa tarefa… que vai variar, conforme o que pretende e onde a janela modar vai ser chamada… voce tem funções já prontas para o WP como:

    wp_get_current_user();
    ou 
    get_userdata( "ID do usuário pretendido" );
    
  • Excelente post, varios modals na minha aplicação ficaram incompativeis e este com uma pequena modificação funcionou perfeitamente, vlw mesmo

Deixar um comentário

captcha