Comunidad de diseño web y desarrollo en internet online

Cómo crear un Popup con JQuery

Por Dientuki el 13 de Octubre de 2008 con 196,146 visitas

HTML, CSS y Javascript Otros tutoriales por Dientuki.

Desde antes de que existiera internet se viene discutiendo sobre el uso/utilidad de los popups, algunos piensan que es la personificación de todas las maldades del mundo, otros que tener popups en su web es muy c00l y otros sencillamente creen que todas las web con popups deberían morir de la faz de internet.
No quiero entrar en discusiones sobre lo bueno/malo de los popups, aquí se ha hablado sobre eso, pero recuerden que jugar con popups es una cosa muy peligrosa que solamente debe hacerse bajo la vigilancia de personas responsables, adultas, y crueles.

Este tip esta realizado con jQuery, una de las mejores librerías de javascript, aquí encontraras tutoriales si quieres conocer más de esta bella herramienta.

Idea básica:

La idea es hacer un popup que muestre una imagen a modo de publicidad, dicha "ventanita" tendrá el botón de cerrar para que el usuario pueda cerrarla. Lo que haremos sera crear un <div> en el cual estará nuestra publicidad y con jQuery controlaremos la forma de como trabaja. Utilizaremos tambien algo de HTML y de css

Paso 1: HTML

En nuestro primer paso crearemos nuestro <div> y dentro de él estará lo que queremos mostrar y también crearemos la X para que el usuario pueda cerrar la ventana. Este código lo deberemos colocar dentro del <body> del html

Código :

<div id="pop">
   <div id="cerrar">X</div>
   <img src="imgages/publicidad.jpg" height="507" width="600" border="0"> 
</div>


También deberemos agregar lo siguiente, pero en este caso dentro de la etiqueta <head>

Código :

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/popup.js"></script>
<link href="css/popup.css" rel="stylesheet" type="text/css" />


La primer linea es para incluir las librerías de jQuery, la segunda es para incluir nuestro script, y la tercera es para incluir el archivo css de nuestro popup. La idea de hacer esto es para tener el código (mas que nada el css y javascript) separado del resto del sitio, para que sea mas fácil agregarlo, modificarlo o eliminarlo.

Paso 2: CSS

Aquí le daremos todo el aspecto visual a nuestro amada/odiado popup.

Código :

#pop {
   z-index:2;
   position:absolute;
   border: 1px solid #333333;
   text-align:center;
   background:#000000;
}
#cerrar {
   float:right;
   margin-right:5px;
   cursor:pointer;
   font:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   color:#FFFFFF;
   background-color:#666666;
   width:12px;
   position:relative;
   margin-top:-1px;
   text-align:center;
}

Vamos a explicar detalladamente los puntos mas importantes del código:

Elemento #pop
  • z-index:2; La propiedad z-index maneja todo el tema de las capas dentro del html, por defecto todo lo que este dentro del html tiene el valor 0, con el valor 2 nos estamos asegurando de que nuestro div este por encima de todas las demás cosas.
  • position:absolute; Con esta propiedad definimos como es que se deben tomar en cuenta los valores para posicionar nuestro div, con asignarle absolute le estamos diciendo que tome como punto de referencia al navegador mismo.
  • text-align:center; Es una forma un tanto simple de centrar el contenido de nuestro div

Elemento #cerrar
  • position:relative; La misma explicación que antes, pero con relative le estamos diciendo que tome como punto de referencia el objeto padre (en nuestro caso, #pop)
  • float:right; Con float le estamos diciendo que el div puede flotar, en nuestro caso sera a la derecha; con esto el div con la X quedara a la derecha.
  • margin-top:-1px; margin-right:5px; Ajustaremos un poco el margen para que se vea mejor.
  • cursor:pointer; Con esto cambiamos la forma del curso, que sera la típica manito.

Las demás propiedades que no se explican, son meramente estéticas y no afectan a la funcionalidad del script. El efecto para superponer una imagen se llama overlaping y hay un tutorial si quieres saber más al respecto.

Paso 3: jQuery

Ahora la parte mas bonita, iré explicando paso a paso el código:

Código :

function mostrar() {
   $("#pop").fadeIn('slow');
} //checkHover

Esta es una función que usaremos luego, lo que hace es mostrar utilizando un fadeIn nuestro div.

Código :

$(document).ready(function (){

Esta es una linea obligatoria, propia de jQuery.

Código :

   //Conseguir valores de la img
   var img_w = $("#pop img").width() + 10;
   var img_h = $("#pop img").height() + 28;
   
   //Darle el alto y ancho
   $("#pop").css('width', img_w + 'px');
   $("#pop").css('height', img_h + 'px');
   
   //Esconder el popup
   $("#pop").hide();

Lo primero que hacemos es conseguir el tamaño de nuestra imagen publicitaria y sumarle unos valores; luego esos valores se los asignamos al css de nuestro <div>; La idea con esto, es no tener que volver a tocar el javascript o el css si llega a cambiar la imagen. Por ultimo, escondemos el popup.

Código :

   //Consigue valores de la ventana del navegador
   var w = $(this).width();
   var h = $(this).height();
   
   //Centra el popup   
   w = (w/2) - (img_w/2);
   h = (h/2) - (img_h/2);
   $("#pop").css("left",w + "px");
   $("#pop").css("top",h + "px");

El popup se centrara dentro de la ventana del navegador, para ello primero debemos saber cuanto es que mide y con las primeras 2 lineas de código conseguimos eso. Luego, calculamos la posición en la que debería estar nuestro popup y se lo asignamos a la propiedad left y top de nuestro <div>, como le habíamos dicho que tenga z-index de 2 y que la posición sea absoluta, se centrara en el medio de la pantalla.

Código :

   //temporizador, para que no aparezca de golpe
   setTimeout("mostrar()",1500);

Con esto, estaremos mostrando el popup cuando pasen 1500 milisengundos, es un efecto decorativo mas que nada, pero que lo distingue del resto de los popups que salen junto con la pagina. Pueden cambiar el valor si lo desean para que demore mas o menos tiempo en aparecer.

Código :

   //Función para cerrar el popup
   $("#pop").click(function (){
      $(this).fadeOut('slow');
   });

Con esto, le daremos una tarea para hacer cuando hagan click sobre nuestro popup, y sera cerrarse, pero con un fadeOut y de manera despacio, para que quede mas c00l.

Código :

});

Cerraremos la linea que habíamos abierto hoy

Eso es todo, con esto ya tendremos nuestro popup echo con jQuery y con estilo.

Pero.... con window.open puedo hacerlo ¿Por que tanto lió?

Hacerlo así tiene 2 buenas ventajas:
1) Técnicamente hablando NO es un popup. ¿WTF? Así es, un popup es cuando se abre una nueva ventana, nuestra "ventana" no es una nueva ventana, sino que es un <div>; este pequeño detalle nos garantiza que los navegadores no podrán impedir que se abra nuestro popup.
2) JQuery nos permite manejar efectos, ¿Por que no usarlos? imagínense que el popup pueda explotar cuando le hacen click, seguramente que el usuario lo disfrutara, tal vez ese usuario le comentara a todos sus amigos del sitio solamente para que le hagan click al popup que explota cuando le hacen click.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (72)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate