Popup me con jQuery
Crea tus propios popups o ventanas modales utilizando las tecnologías jQuery, HTML y CSS para personalizarlos al máximo posible. Popup jQuery.
Este tipo de ventanas modales se pueden emplear para mostrar una fotografía, texto, un formulario o lo que se te ocurra.
En el ejemplo vamos a ver como abrir una ventana modal utilizando fadeIn() y cerrarla utilizando fadeOut(), funciones disponibles utilizando la librería jQuery.
Lo primero que deberemos hacer es incluir la librería jQuery y los scripts que realizarán la función.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('#open').on('click', function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').on('click', function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>El script lo que hace es esperar a que se haga click en un link con id=»open» abriendo con el efecto que ofrece la función fadeIn otro contenedor con id=»popup» que inicialmente está escondido con display:none.
También tenemos controlado el evento para cerrar la venta. En este caso, cuando se pulsa en la «x» (enlace con id=»close», en el caso del ejemplo), la ventana modal se cierra y la opacidad que se aplica al cuerpo de la página desaparece.
Ahora dentro del <body>, justo antes de la etiqueta de cierre </body> añadimos el código HTML que representa nuestro popup tal como sigue:
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><a href="#" id="close"><img src="images/close.png"/></a></div>
<div>
<h2>Contenido POPUP</h2>
<p>Lorem Ipsum...</p>
<div style="float:left; width:100%;">
</div>
</div>
</div>
</div>
<div class="popup-overlay"></div>El código anterior puedes depositarlo al inicio del <body> o al final y representa la ventana modal. Necesitarás algunos estilos para darle algo de presentación. En el ejemplo en funcionamiento estamos utlizando los siguientes estilos:
#popup {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.content-popup {
margin:0px auto;
margin-top:120px;
position:relative;
padding:10px;
width:500px;
min-height:250px;
border-radius:4px;
background-color:#FFFFFF;
box-shadow: 0 2px 5px #666666;
}
.content-popup h2 {
color:#48484B;
border-bottom: 1px solid #48484B;
margin-top: 0;
padding-bottom: 4px;
}
.popup-overlay {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
display:none;
background-color: #777777;
cursor: pointer;
opacity: 0.7;
}
.close {
position: absolute;
right: 15px;
}El #popup es la clave del asunto ya que con sus propiedades se superpone al resto de la página como si estuviera flotando por encima.
Esta entrada ha sido actualizada el 14/09/2018.
Autor
¿Buscas trabajo de programador?
73 respuestas a “Popup me con jQuery”
Deja una respuesta
99 artículos que te podrían interesar
Ver más sobre
Hola!
Primeramente gracias por el aporte que nos proporcionas me fue de grana ayuda, aunque tengo un pequeño problema tengo un formulario y al presionar el boton solo me lanza el popup pero no recibo los datos, lo que requiero es un buton que al enviar los datos salga el popup diciendo envio exitoso. Me puedes ayudar con eso?
Y nuevamente muchas gracias por tu aporte. <3
Hola,
Si todavía necesitas ayuda, puedes enviar un mensaje al centro de soporte técnico situado en:
https://www.jamodules.com/prestashop-addons/es/soporte
indicando todos los detalles de tu petición para que lo podamos estudiar.
Saludos
Hola Amigo, Consulta como sería el código para que aparezca al entrar a la web??
Gracias !!!
Hola,
Tendrás que hacer un trigger del botón que abre el popup al cargar la página.
En el siguiente enlace tienes un ejemplo con Fancybox:
https://www.jose-aguilar.com/blog/fancybox-onload/
Saludos
Muchas gracias.
Muchas Gracias por el aporte esta genial,
Solo una consulta el boton de close no sirve, tengo una lista de 7 nombres personas a los cuales al dar click muestra la biografia de cada una. abre y funciona bien pero el boton cerrar o la x close para cerrar esta ventana no funciona en orden ascendente. Ejemplo
Nombre 1 No sirve
Nombre 2 No sirve
Nombre 3 No sirve
Nombre n.. no Sirve
Nombre 7 Si sirve
Al dar click al ultimo nombre si sirve el boton y si voy al nombre 6 ya sirve y asi en retroceso en ese orden….
Como puedo hacer para que funcione desde cualquier nombre sin que se vaya en algun orden.
Hola,
Creo que lo puedes solucionar fácilmente. Este artículo está pensado para un solo popup por página pero si quieres tener varios debes hacer varios cambios:
1) Al enlace con id=»close» que contiene la imagen de cerrar debes quitarle este identificador y poner class=»close».
2) La captura del evento click del elemento close debes cambiar a este formato:
$(‘.close’).click(function(){
$(‘#popup’).fadeOut(‘slow’);
$(‘.popup-overlay’).fadeOut(‘slow’);
return false;
});
Quizá también tienes que hacer dinámico el identificador de cada popup para poder mostrarlo u ocultarlo.
Saludos
muchas gracias por compartir, excelente tutorial, me ha sido muy util
Muchas Gracias me ayudaste bastante. Estuve tratando de usar varias soluciones pero para mi proyecto no aplicaban. tuve que irme por lo basico para tratar de adaptarlo.
Muchas gracias 5 años después tu entrada me ayudo en el desarrollo de mi software
Gracias hombre, tu web me ha servido de mucho.
Como puedo hacer que cargue despues de 30 segundos…
Revisa la función setInterval de javascript
Buenos días Jose,
Antes de nada, quisiera darte las gracias por tus aportaciones, son muy buenas.
Te comento, en mi código tengo montado una array() para cargar los datos de los clientes y en cada uno de ellos le paso las variables del cliente para que luego pueda recuperarlos y poder mostrarlos en el pop up, el problema que tengo que solo me muestra el primero, me puedes ayudar?
Adjunto el punto de código donde realizo la carga
0 ) {
foreach($cliente as $fila){
$num=$num+1;
?>
<tr class=>
getId()?>
getNombre()?>
<a data-toggle="modal" data-target=".bs-example-modal-lg" id="open" href="busqueda_clientes.php?id=getId()?>&tipo=2″>
….
Hola que tal,
Para este tipo de ayudas que requieren más de una hora lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
Buenazo! Muchas gracias!
Muy bueno, gracias por la inspiración. 😀
Muchas gracias, me fue muy util.
Hola, sabes si se podria implementar esto en wordpress y como podria hacerlo?? porque estoy intentando abrir una pagina wordpress (la pagina de condiciones de uso para ser mas explicito), al pulsar en el elemento del menu correspondiente pero no encuentro ningun plugin que haga exactamente esto, hay muchos de fancybox,.., pero eactamente que se abra la pagina en porup al pulsar el elemnto del menu exactamente.
Muchas gracias
Hola, si en wordpress se puede adaptar todo. Si tienes idea de maquetación con html, css y ademas jquery no deberías tener muchos problemas.
Muy buen aporte, una consulta como puedo poner una restriccion tipo el popup solamente abre cuando presiona el boton cuando rellenar un campo obligatorio de la web
Saludos Muchas Gracias
Excelente!!!
Buenas tardes, gracias por tu aporte excelente, y como seria el codigo si quisiera que el pop up aparezca ni bien cargue la página y solo este habilitado el botón para cerrar.
Muchas gracias
Estimado José:
El pop up diseñado por ti, me ha funcionado impecable, en chrome y exlplore, habia visto algunos parecidos pero solo me funcionaban en chrome.
Mis felicitaciones por la calidad de tu trabajo y gracias por compartirlo con los demás.
Quiero hacerte 2 consultas:
Tengo una tabla que se autogenera con el contenido de una base de datos access, y en una de las celdas, tengo que levantar un pop up, para lo cual utilicé tu diseño, pero aquí me surge el problema, solo me levanta el popup en la primera linea de registros, en las siguientes no lo levanta y no he podido averiguar el por qué.
La otra consulta, dentro del popup, tengo que mostrar datos, y como deducirás deben ser datos distintos dependiendo de la línea de la tabla en que abra el popup, es decir me debe cargar, por ejemplo, rut, numero id, etc., datos que tento en una consultas, pero no sé como pasarlos a la tabla del popup, si me pudieras indicar cómo pasar estos parámetros, te lo agradecería mucho.
Agradeciendo de antemano tu respuesta.
Atentamente,
Rodrigo
Hola! Primero que nada, muchas gracias por tu aporte, es de mucha ayuda!
Necesito consultarte si vos podrás ayudarme con dos problemas que tengo.
El primero es que intento opacar el fondo cuando abre el popup, seguí tus indicaciones que diste más arriba, pero no logro hacerlo, hay alguna otra manera?
Y el otro problema es que intento linkear un video de youtube que abra como popup desde el menu principal, pero tampoco lo logro. Podrás ayudarme?
saludos
Hola que tal, estoy intentando crear 2 pop-up en la misma pagina.Uno con un formulario para registrarse y otro con un formulario para iniciar sesion. El problema es que el segundo pop-up no se muestra al hacer clic, sino que tengo que hacer clic en el primero para que se muestre junto con este.
Puedes verlo en la web http://www.frasestwitter.org , echale un vistazo y haber si puedes decirme donde esta el fallo, porque copio y pego tal cual tu ejemplo.
Muchas gracias de antemano
Parece que ya está solucionado
hola antes que todo gracias por tu post, me reulto muy util en mi sitio ya que soy nuevo con JQuery.
ahora solo tengo lo siguiente: estoy creando el mismo link y el codigo correspondiente a su popup uno por cada elemento que tengo dentro de un ciclo for en php, elemplo:
for(elemento in result)
Detalles
Contenido POPUP
elemento.foto
elemento.descripcion
end for
en el primer elemento me muestra su foto y su descripcion muy bien, pero cuando voy a los detalles del segundo elemento en adelante me esta cargando la foto y los detalles del primer elemento, sin embargo con firebug cada popup toma el valor que debe tomar pero al usuario se le esta mostrando siempre la foto y los detalles del primer elemento.
en el codigo javascrip cambie $(‘#open’) por
$(‘.open’) para que me saliera el popup en cada elemento
ahora la pregunta es:
como puedo hacer que en cada popup dentro del for se me cargue con los valores que debe y me los muestre??
de ante mano muchas gracias y espero entiendas este trabalenguas y me puedas ayudar.
Salu2
Hola,
Yo creo que necesitarás identificar cada contenedor que hace de popup con un identificador único en la página y que cada enlace que lo abre trabaje con el class como bien dices pero creo que te falta añadir como atributo data el identificar del popup para que cuando hagas click en el enlace puedas capturar el data para abrir el popup correspondiente.
Saludos
He estado buscando como poder realizar un popup y el tuyo es genial, te agradezco mucho la ayuda, pero veo la información se encuentra en el mismo html, intente ubicar el link del html que quiero que abra, pero no lo logre.
$(‘#open2’).click(function(){
$(‘videos/video.html’).fadeIn(‘slow’);
//$(‘body’).css(‘opacity’, ‘0.5’);
return false;
});
Podrías ayudarme?
Gracias
Hola, tengo la misma pregunta que realizo Peter en el 2013, podrias darme la respuesta? Muchas gracias !!
Quisiera saber si se puede abrir un popup dentro de otro/ejemplo me abre un popup y en ella tengo una grilla y quiero que al momento de seleccionar una celda me abra otro popup/ se podra?
Hola,
No lo he probado pero con los recursos que tiene jQuery yo diría que si se puede llegar a conseguir pero se tiene que trabajar.
Saludos
Muchas Gracias!!!!
Muy buen Post. Buena información, muy bien explicado. Lo probaré. Ví el ejemplo y me parece muy bueno. ¿Sería posible hacerlo responsive?
si, supongo que adaptándolo con porcentajes utilizando media querys
Es muy bueno tu trabajo, además sos un capo respondiendo.
Una pregunta, (lo busqué y nadie preguntó) yo quiero que se habra solo cuando cargas la página.
Cómo hago?????
Muchas gracias y feliz año
Hola, muy bueno el post, el ejemplo esta muy claro, y me fue de gran utilidad, le felicito por su post y le animo a seguir publicando ya que es de mucho beneficio para programadores que inician, jejje
saludos y bendiciones
alguien tiene este ejemplo ya funcionando y que este colgado en algun servidor para poder descargarlo, porque ami no me funciona no lo supe aplicar.
Gracias
Puedes descargar el ejemplo que hay en linea –> http://www.jose-aguilar.com/scripts/jquery/fadein-popup/fadein-popup.zip
hola!
segui el ejemplo pero no salio,
copie el codigo fuente directo de la pagina
le cambie el nombre de las imagenes por otras que tenia y sigue sin salir,
el problema que tengo es que en lugar de abrir una capa en la misma pagina se abre en otro link y ocupa toda la pagina, porque me sale eso?
Si nos pasas la url donde tienes el problema podríamos ver más claramente donde está el problema
Hola quisiera saber si se puede abrir un popup dentro de otro/ejemplo me abre un popup y en ella tengo una grilla y quiero que al momento de seleccionar una celda me abra otro popup/ se podra?
Excelente aporte y funcional
Muchas gracias, esta muy bueno el contenido.
Una pregunta, ¿como podría abrir la capa desde el body?, el propósito es que habrá la capa al cargar la página.
He probado con un lo ca ti on . h ref pero no logro aplicarle el estilo para que abra.
Muchas gracias
saludos
Hola buenos días,
Prueba utilizando la función load en vez de click
saludos
Ya lo solucioné, gracias.
Podrías indicar la solución para que lo vean otros usuarios, saludos
Buenas, tengo una duda, a mi me sucede lo mismo que dijo Sid, tengo varios links y por cada link quiero abrir el popup, pero cuando lo intento solo lo abre una vez. Le agradecería si me pudieras ayudar. Muchas gracias.
gracias por responder.
Lo he solucionado así, tal vez no me explique bien
en la etiqueta <a href….. le coloque un id a cada etiqueta <a>
y en jquery
bbbb id=$(this).attr(\"id\");
$.ajax({
type: \"GET\",
url: \"modules/dashboard/ajx_pop.php?id=\" + id,
data: dataString,
success: function(data) {
$(\"#capaContent\").html(data);
}
});
con esto ya me muestra en el popup el valor recuperado jquery..
mi problema ahora es que parece se pierde la libreria jquery.. el direccionamiento no funciona como espero.. es decir cuando abro el popup despues de este codigo… el boton cerrar del popup deja de funcionar, no me marcar error el firebug. pero el boton no hace nada..
como puedo solucionarlo
Como puedo actualizar el contenido de popup.. es decir.. al hacer click en el enlace de la ventana principal pasarle un parámetro he imprimir este parámetro dentro del popup
La impresión desde «PHP»
echo $variable;
gracias, Saludos
Diría que no hace falta pasar ningun parámetro. No lo he probado pero diría que haciendo el echo de la variable dentro del contenedor popup ya valdria.
gracias por responder.
Lo he solucionado así, tal vez no me explique bien
en la etiqueta <a href….. le coloque un id a cada etiqueta
y en jquery
bbbb id=$(this).attr(«id»);
$.ajax({
type: «GET»,
url: «modules/dashboard/ajx_pop.php?id=» + id,
data: dataString,
success: function(data) {
$(«#capaContent»).html(data);
}
});
con esto ya me muestra en el popup el valor recuperado jquery..
mi problema ahora es que parece se pierde la libreria jquery.. el direccionamiento no funciona como espero.. es decir cuando abro el popup despues de este codigo… el boton cerrar del popup deja de funcionar, no me marcar error el firebug. pero el boton no hace nada..
como puedo solucionarlo
Estimado,
muchas gracias por el codigo… lo voy a poner en practica
Gracias por tu codigo, es de gran utilidad, lo unico :(, es que me paso lo mismo que Jorge Gortari.
Muchas gracias por la ayuda.
Buenas tardes, primero muchas gracias por el código me ha sido de mucha ayuda, pero me gustaría saber si el evento del pop-up se puede
programar para que aparezca solo una vez, o con algún condicional por ejemplo me registro y ya no aparece más.Teniendo en cuenta que la plataforma que estoy usando es Prestashop Muchas gracias.
En prestashop puedes condicionarlo mirando si existe la variable de sesión con algo asi {if !$logged} en el archivo .tpl
Hola genio, tengo una consulta, lo puse en práctica para colgar peliculas argentinas en mi blog. Hasta ahí me resulto de diez, ahora bien, el problema es que si cierro la pelicula sigue corriendo..
como puedo hacer para que este al cerrar se detenga!
Muchas Gracias y espero tu respuesta!
Un Abrazo!!
En el código jquery que se ejuta al cerrar (#close) deberás investigar como cerrar la película también mediante jQuery. De todas me resulta extraño que la película siga corriendo si el div se ha escondido. Tendría que probarlo.
Estimado me resulto todo bien, pero cuando trato de hacer varios pop up dentro de una misma pagina no me resulta.
Primero le cambié al script todos los id por class:
$(document).ready(function(){
$(‘.open’).click(function(){
$(‘.popup’).fadeIn(‘slow’);
});
$(‘.close’).click(function(){
$(‘.popup’).fadeOut(‘slow’);
});
});
Al hacer click en cualquier link con class=”open” toma el div con class=»popup» que se encuentra más abajo.
Estoy un poco perdido, puedes ayudarme a solucionar esto?
Hola Jorge que tal,
Si quieres tener varios popus dentro de la misma página tendrás que duplicar los links con distinto id, los divs de los popups con distinto id y añadir el estilo correspondiente al nuevo #popup.
En la siguiente url lo puedes ver:
http://www.jose-aguilar.com/scripts/jquery/fadein-popup/demo.html
Estimado me solucionaste la vida.
Deje los div open, close, popup. solo para ser controlados por el jquery y a los elementos les agregue un class igual para el diseño
probe lo de la opacidad $(‘body’).css(‘opacity’, ‘0.5’);, pero también agarra el popup.
Muchas gracias por la ayuda
Muchas gracias por el tutorial, me sirvió muchísimo. 🙂
Hola estimado soy nuevo en esto del jquery, pero al usar tu metodo me funciono muy bien hasta que trate de hacer varios pop up en una sola pagina, ya que me abre el mismo pop up.
Podrías guiarme un poco para ver como lo puedo hacer?
Hola,
Muchas gracias por tu aportación. Tengo una duda, además se puede hacer que al abrir el PopUp el resto de la página tenga opacidad?
Gracias!!
si se podría hacer aplicando los estilos necesarios. Lo podrias hacer con jquery añadiendo algo así al pulsar el link:
$(‘body’).css(‘opacity’, 0.7);
o añadiendole una imagen opaca:
$(‘body’).css(‘background-image’, ‘images/imagen_opaca.png’);
No se si funcionará, todo es probar.
Hola,
Muchas gracias por tu aportación. Tengo una duda, además se puede hacer que al abrir el PopUp el resto de la página tenga opacidad?
Gracias!
podrias pasarme la libreria del jquery
La libreria te la puedes descargar de http://jquery.com/download/ o en su defecto del mismo ejemplo en funcionamiento viendo el código fuente.
Ups, olvidé la etiqueta code para el ejemplo. Perdón.
Link 1
Link 1
Link 1
Si tienes varios links yo lo que haría es cambiar el código que abre y cierra los popups
$(‘#popup’).fadeIn(‘slow’); por
$(‘.popup’).fadeIn(‘slow’);
Modificar los estilos y al link ponerle un class=»popup»
Muchas gracias por tu código.
Le he encontrado un problema: funciona bien cuando tienes un único enlace a la ventana modal. Pero cuando hay más de uno, no funciona bien:
Link 1
Link 2
Link 3
¿Alguna idea?
para poner varios en una misma pagina solo cambiale el id de este ejemplo que es open, le pones nombres distintos a los otros links y ya
Muchas gracias por el ejemplo, me ha sido de gran utilidad para basarme en un desarrollo que tengo pendiente.
un saludo