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">X</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; 
  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;
  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;;
  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.

Gostou? Faça gosto, comente e partilhe com os seus amigos a nossa página!

---

---