Como criar popup em div box

20 de junho de 2011 Dicas e Códigos

Hoje em dia os navegadores já vêm com a funcionalidade de bloqueio de pop-ups, ou janelas sobressalentes, porém existe uma forma de evitar que o navegador bloqueie uma informação ou algum conteúdo que seja importante ser aberto com uma mensagem atual, ou uma propaganda… ou o que quer que seja. Esta forma é através das DIVs, você pode fixar uma div sobre seu site, para isso, basta criar uma div fixa na tela, com um botão flutuante à esquerda para que seja fechada.

Uma forma de fazer isso, é justamente através de uma simples função em Javascript, que você pode definir a abertura e o fechamento da mesma.

Então, para fazer a sua div, vc deve definir as regras para que ela esteja visível ou invisível (defina em seu CSS o parâmetro: display:block; ou display:none, também pode ser usado visibility:hidden, ou visibility:visible), isso vai depender do comportamento que você deseja para sua div.

Então sua html ficaria mais ou menos assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste de Popup</title>
<script type="text/javascript">
// abre a DIV
function abreJanela(id){
var obj = document.getElementById(id);
obj.style.display='block';
}

// fecha a DIV
function fechaJanela(id){
var obj = document.getElementById(id);
obj.style.display='none';
}
</script>
<style type="text/css">
body {
	background: #000000;
}
#popup {
		font-family:Arial, Helvetica, sans-serif;
		display:block;
		position:absolute;
		width:300px;
		height:450px;
		left:50%;
		top:30px;
		border:1px solid #000000;
		padding:6px;
		color:#000000;
		background: #fff;
		z-index:300;
       }
#popup p{ line-height:18px}
#popup a.fechar {
                 color:#000033;
				 text-align:right;
                 float:right;
                 text-decoration:none;
				 font-family:Arial, Helvetica, sans-serif;
				 width:20px;
				 }
#popup a:hover.fechar { color:#003399
				      }

</style>
</head>

<body>

<a href="javascript:;" onclick="abreJanela('popup')">Abrir Popup</a>

<div id="popup">
<a href="javascript:;" onclick="fechaJanela('popup')" class="fechar">X</a>
<!--//aqui entra seu conteúdo-->
<p>teste de mensagem</p>
</div>
</body>
</html>

Porém você pode implementar ainda mais seu código javascript, usando recursos do jQuery:
conforme abaixo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// abre a DIV
function abreJanela(id){
         var obj = document.getElementById(id);
         $(obj).fadeIn("slow");
         }
// fecha a DIV
function fechaJanela(id){
         var obj = document.getElementById(id);
         $(obj).fadeOut("slow");
         }
</script>

2 Responses to Como criar popup em div box

Pyetro disse:

8 de março de 2012 às 16:17

Ficou bom, mas vi uma redundancia ae, no trecho :
```
// abre a DIV
function abreJanela(id){
  var obj = document.getElementById(id);
  $(obj).style.display='block';
}

Porderia muito bem ter feito dessa forma:

// abre a DIV
function abreJanela(id){
  $(id).style.display='block';
}
```
Já que está usando jQuery, não há a necessidade de usar js na mão.
…

Responder
- Ivan disse:
  
  16 de março de 2012 às 14:43
  
  Olá Pyetro,
  Não se trata de uma redundância, vc pode utilizar vários métodos, mas o ideal para que funcione o seu método deveria ser assim…
```
function abreJanela(id){
$('#'+id).fadeIn("slow");
}
function fechaJanela(id){
$('#'+id).fadeOut("slow");
}
```
  Responder