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');
} //checkHoverEsta 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 cierto, para que quede en registro, ese tipo de popup es conocido como "fake poopup" o "falso popup" y es casi tan fastidioso como un popup normal.
The Fricky! :
Por cierto, para que quede en registro, ese tipo de popup es conocido como "fake poopup" o "falso popup" y es casi tan fastidioso como un popup normal.
Sin embargo con un buen uso puede resultar útil.
The Fricky! :
Aqui expuse una forma sencilla, facil y no intrusiva de hacer un popup, con una libreria que es muy facil de utilizar. Espero que lo utilicen bien.
Por Marcelo el 26 de Noviembre de 2008
Código :
function cerrar() { $("#pop").fadeOut('slow'); } / setTimeout("cerrar()",10500);Por Marcelo el 26 de Noviembre de 2008
Por Marcelo el 27 de Noviembre de 2008
Por Marcelo el 27 de Noviembre de 2008
Que es el código que ven más arriba, pero cuando lo pongo al final del código original del tutorial deja de funcionar todo. HELP!!
Por Marcelo el 27 de Noviembre de 2008
Código :
function cerrar() { $("#pop").fadeOut('slow'); } //checkHover $(document).ready(function (){ //Conseguir valores de la img var img_w = $("#pop img").width(338) + 10; var img_h = $("#pop img").height(205) + 28; //Darle el alto y ancho $("#pop").css('width', img_w + 'px'); $("#pop").css('height', img_h + 'px'); //Consigue valores de la ventana del navegador var w = $(this).width(338); var h = $(this).height(205); //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"); //temporizador, para que no aparezca de golpe setTimeout("cerrar()",25800); //Función para cerrar el popup $("#pop").click(function (){ $(this).fadeOut('slow'); }); })Si es correcto no lo sé pero que funciona, funciona.
PD: Gracias Dientuki!!!
Por Marcelo el 28 de Noviembre de 2008
Saludos
Por Carolina el 02 de Enero de 2009
Por mmm el 30 de Enero de 2009
Por Anonimo!! el 09 de Febrero de 2009
Por william el 22 de Febrero de 2009
Por Negro el 25 de Febrero de 2009
Por Tabako el 22 de Abril de 2009
Por jmmulford el 28 de Abril de 2009
Perdonen mi ceguera pero no encuentro el código de popup.js
Por ikichpan el 02 de Mayo de 2009
Por Galambito el 31 de Mayo de 2009
</h3>
<hr/>
<p style="text-align:justify;">Aquí dejo mi aportación las modificaciones q hice fue para poder cerrar pop-up desde la X espero les sea de utilidad.
</p>
<hr/>
<codigo>
function mostrar() {
$("#pop").fadeIn('slow');
$("#cerrar").fadeIn('slow');
}
$(document).ready(function (){
//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();
//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");
//temporizador,
//para que no aparezca de golpe
//(Inizializador)
//setTimeout("mostrar()",1500);
//Función para cerrar el popup
//Click en X
//$("#cerrar").click(function (){
// $(this).fadeOut('slow');
// $("#pop").fadeOut('slow');
//});
//Función para cerrar el popup
//Click imagen
$("#pop").click(function (){
$(this).fadeOut('slow');
$("#cerrar").fadeOut('slow');
});
});
</codigo>
Por Luca el 12 de Agosto de 2009
el proyecto esta puesto en google code y se tiene que bajar desde la web del autor
estos son los links:
http://www.dieroboter.com/jQPOOOP/
http://code.google.com/p/pluginjquery/
Por lokie el 24 de Agosto de 2009
Y lo segundo
te copio mi popup.js
function mostrar() {
$("#pop").fadeIn('slow');
} //checkHover
$(document).ready(function (){
//Conseguir valores de la img
var img_w = 352;
var img_h = 288;
//Darle el alto y ancho
$("#pop").css('width', img_w + 'px');
$("#pop").css('height', img_h + 'px');
//Esconder el popup
$("#pop").hide();
//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");
//temporizador, para que no aparezca de golpe
setTimeout("mostrar()",1500);
//Función para cerrar el popup
$("#pop").click(function (){
$(this).fadeOut('slow');
$("#cerrar").fadeOut('slow');
});
});
Agradezco de antemano cualquier ayuda que me puedan dar.
Saludos
Por eduardodm el 02 de Febrero de 2010
Tengo un problema con la posición para el iexplorer ya que lo moví a la esquina inferior derecha lo cual no sucede con firefox ni chrome.
Saludos y gracias de nuevo.
Por César el 03 de Febrero de 2010
Veran estoy haciendo una pagina, y quiero que cuando quieran ver el Menu de un paquete, este se abra con este magnifico DIV que aqui proponene jeje!
$('a.miclick').click (function( $("#pop").fadeIn('slow'); ) )
@eduardodm. mira tu css y lee sobre posicion absolute/relative
Por pleter el 09 de Febrero de 2010
js/popup.js
js/jquery.js
porque lo busco y busco y no lo encuentro y no puedo armar lo que dice esta entrada.
gracias.
js/popup.js es el paso 3
Por straiche el 19 de Marzo de 2010
Saludos,
Straiche
Por julio el 14 de Mayo de 2010
Por Fxomulder el 13 de Junio de 2010
!!!!!!!!!!!!!!!!
Por Juanix24 el 07 de Julio de 2010
Por ale el 17 de Septiembre de 2010
y no lo puedo usar
Qué puedo hacer?
Gracias a todos
por como me ayudaron
Por hitogoroshi el 02 de Octubre de 2010
Por Gabriel el 17 de Diciembre de 2010
Por Werol el 03 de Enero de 2011
Por Wilder el 31 de Enero de 2011
Es corto y muy eficiente.
Yo lo adapte para Symfony mandando un formulario mediante ajax similar a lo que facebook hace.
Por ariswiwi el 05 de Marzo de 2011
Por ariswiwi el 05 de Marzo de 2011
De nuevo, grcias...!
PD: En realidad, aqui, soy wiwi74
Por domingo31 el 05 de Abril de 2011
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Por Rodry el 27 de Abril de 2011
Por joel el 16 de Mayo de 2011
Por maxi el 15 de Julio de 2011
Por Jhonatan el 22 de Julio de 2011
Por Bruno el 12 de Noviembre de 2011
¿Podrias explicar como se hace para que el popup sólo se muestre una vez al día o cuando pierda la sesión el visitante?
Gracias!
Por Alvaro el 15 de Noviembre de 2011
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