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.
Por @rolodart el 06 de Marzo de 2012
Esta super para iniciarse.
tank
Por @rolodart el 06 de Marzo de 2012
ahora si..
Por jose el 10 de Marzo de 2012
Por michael el 07 de Mayo de 2012
Gracias!!!!!!!!!!!!
Por diego el 16 de Mayo de 2012
Por Alu el 29 de Junio de 2012
Por Alu el 29 de Junio de 2012
O BUENO PONELO OPACO
asi como las img de facebook?¡ les agradeceria si alguen sabe saludos =)
Por jayro el 05 de Julio de 2012
Por Gaston el 07 de Agosto de 2012
Por Alextiton el 13 de Diciembre de 2012
Por lol el 13 de Marzo de 2013
Por Andres el 20 de Junio de 2013
Por el 29 de Agosto de 2013
Por Mairo el 03 de Octubre de 2013
Por Esteban el 11 de Abril de 2014
Por Fannybel el 05 de Mayo de 2014
Saludos
Por AlejaSierra el 12 de Septiembre de 2014
Por PONCHO el 15 de Septiembre de 2014
Por Carlos Radikal el 01 de Diciembre de 2014
GRACIAS
Por lokuedo5000 el 07 de Noviembre de 2015
Por Cristian Garcia el 02 de Marzo de 2016
Por Rodrigo Pizarro el 03 de Febrero de 2018