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.
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
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
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.
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.
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.
Muy bueno, Dientuki! 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. Por:The Fricky!
The Fricky! :
Muy bueno, Dientuki! 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. Por:elfleat
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.
Es posible hacer usable y util este tipo de popups. Por lo menos no rompen tu experiencia de usuario como un popup real. Por:Freddie
Incluso un popup real bien usado es efectivo. No quiero entrar en la discucion si sobre los popups son buenos o malos, para mi lo que es bueno o malo es como se utiliza ese popup. 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:Dientuki
Oh, no, no me malinterpretes. No he querido decir que son exactamente lo mismo o que los falsos popup no puedan ser usables (que no diré lo mismo de los popups reales, sólo conozco un caso donde no me resulte molesto y es en la barra de Google), quizá debí decir que pueden llegar a ser igual de fastidiosos, de hecho, hay varios casos en la web donde son usados de una forma grosera, acabando con la visión del sitio e interrumpiendo la fluídez, pero ciertamente hay otros casos donde, no sólo son justificados sino útiles. Ha sido mi falta no explicarme. Por:The Fricky!
Para que el pop up se cierre automáticamente luego de pasado un tiempo como sería? Por:Marcelo-blog
algo asi
Código :
function cerrar() {
$("#pop").fadeOut('slow');
} /
setTimeout("cerrar()",10500);
Gracias Dientuki, y disculpa la ignorancia, pero en que lugar del código que has explicado debería poner la cuncion de cerrar? Por:Marcelo-blog
Tic, tac... Por:Marcelo-blog
Alguna mano solidaria que me ayude a terminar este pop up no intrusivo que me ha enseñado Dientuki a medias. Me falta agregar a la exelente función del pop up que se cierre luego de determinado tiempo.
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-blog
Bueno al fin!!! El código me funcionó con de la siguiente manera:
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-blog
Ayer rebosaba de alegría con la función termporizada de cerrar que me había pasdo Dientuki, hasta que hoy suena mi celular y del otro lado me decien que nuestro hermoso pop up no intrusivo temporizado no funcionaba en ya saben que navegador. MALDICIÓN.... Ahora busco soluciones, para quién las tenga, los códigos (o las cartas) estan en la mesa.
Saludos Por:Marcelo-blog
Tuve problemas con jquery con scriptaculos y eso; fijate eso Por:Dientuki
Deberia haber un demo de como queda funcionando Por:Carolina-blog
i,.lk-ip-o Por:mmm-blog
Noooooo que chafa!!... sin archivos de ejemplo... sin ejemplo funcionando.. ni nada... por ejemplo, para que es js/popup.js?? en ningun momento mencionas en que archivo se hacen las modificaciones... no se pueden obviar esos detalles.. por que aburres a la gente!! Por:Anonimo!!-blog
muchas gracias, me ayudastes a solucionar este problema de paso, entender mas jquery es fenomenal, gracias Por:william-blog
como se hace para que este pop up se abra automaticamente al entrar a una pagina sin tener que hacer click en un link? Por:Negro-blog
Funciona excelente, justo lo que andaba buscando, y para anonimo que pregunta que para que es js/popup.js, pues es simplemente pa que metas todo ese javascript que hay en en ejemplo, es cuestion de pensar 2 segundos Por:Tabako-blog
Mil gracias por sus valiosos aportes.
Perdonen mi ceguera pero no encuentro el código de popup.js Por:jmmulford-blog
oye super aport, me sacaste de un apuro. Aun q me gustaria que pasaras bien el dato para cerrar el popup desde IE con el boton. yo lo deje asi http://www.biomaya.com.mx/, para lo que requeria el cliente me sirvio, pero me encantaria poder cerrarlo desde la X, espero puedas detallarlo. Gracias Por:ikichpan-blog
<h3>Hola excelente me parece muy buena solución felicidades
</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');
});
Hola Dientuki, lo primero es darte las gracias por este gran aporte.
Y lo segundo es comentarte un problemilla que tengo con el mismo. En firefox me funciona perfectamente, pero en ie no hay tu tia. Yo he cambiado la imagen por un swf y cuando hago clik sobre el en ie no hay marera que se cierre.
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:lokie
Excelente tip, gracias por todo.
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.
@eduardodm. mira tu css y lee sobre posicion absolute/relative Por:Dientuki
donde puedo conseguir
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. Por:pleter
js/jquery.js es el framework, lo bajas de jquery.com js/popup.js es el paso 3 Por:Dientuki
Es posible crear un pop up que salga en los resultados de busqueda de google?
Saludos,
Straiche Por:straiche-blog
buenas... por favor auxilio no se como hacer para q el popup se abra al entrar a la pagina osea q se abra automaticamente en vez de dar click!! HELP HELP. gracias de antemano!!! Por:julio-blog
Algo mas importante se te olvido colocar el link para descargar el pluggins popups de jquery.
!!!!!!!!!!!!!!!! Por:Fxomulder-blog
Hola soy nuevo en este tema y necesito urgentemente un archivo que me falta para completar este maravilloso popup, el precisamente el javascript que pone popup.js que esta dentro supuestamente de una carpeta llamada js. Según éste tutorial. He copiado todo tal y como estaba aquí y no me funciona. PORFAVOR AYUDA URGENTE. GRACIAS A TODOS POR ADELANTADO. Por:Juanix24
Hola Dientuki, un consulta. Hay alguna forma de que se oscuresca la pantalla al mismo tiempo que sucede esto ? Con oscurecer me refiero a un png con 50 de alpha para que se pueda visualizar el resto de la pagina. Desde ya muchas gracias. Por:Patrol
javascript
css
ajax
jquery
popup
.
es comentarte un problemilla que tengo con el mismo. En firefox me funciona perfectamente, pero en ie no hay tu tia. Yo he cambiado la imagen por un swf y cuando hago clik sobre el en ie no hay marera que se cierre.