jQuery Slide Popup al cargar la página
En este artículo vamos a ver como crear un slide popup con la idea de mostrarlo al cargar una página Web con contenido publicitario y con la posibilidad de poder abrirlo mediante un link.
En el ejemplo que vamos a ilustrar tendremos un producto destacado que se abrirá en este popup al cargar la página.
Para añadir esta idea en nuestra página Web hay muchos plugins para poder hacerlo pero en este caso vamos a optar por programarlo directamente.
Necesitaremos disponer de la librería jQuery para realizar la animación de slide popup. Por tanto, deberemos incluirlo en el <head> de nuestra página si es que no lo tenemos:
<script type="text/javascript" src="../jquer.js"></script>
Seguidamente, también en el <head> crearemos 2 funciones que se encargarán de realizar la animación:
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#popup').css('display','block');
$('#popup').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#overlay').fadeOut('fast');
});
}
</script>
Tendremos una función que desplazará el popup de derecha a izquierda hasta el centro y la función que se encargará de cerrarlo con la animación de desplazamiento hacia la izquierda.
El contenido del popup lo depositaremos en el <body> y será el siguiente:
<div id="popup" class="popup">
<a onclick="closeDialog('popup');" class="close"></a>
<div>
<!-- YOUR CONTENT -->
</div>
</div>
También podríamos añadir un link para abrir de nuevo el popup:
<a onclick="openDialog();">Mostrar publicidad</a>
Ahora solo faltaría añadir los estilos necesarios:
.popup {
background-color: #ffffff;
color: #888888;
height: 245px;
left: 100%;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 550px;
z-index: 101;
-moz-box-shadow: 0px 0px 10px 1px #888888;
-webkit-box-shadow: 0px 0px 10px 1px #888888;
box-shadow: 0px 0px 10px 1px #888888;
border-radius:10px;
-moz-border-radius:10px;
}
.overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
opacity:0.5;
}
a.close {
background: url("cancel.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 26px;
left: 32px;
position: relative;
top: -33px;
width: 26px;
}
Autor
¿Buscas trabajo de programador?
55 respuestas a “jQuery Slide Popup al cargar la página”
Deja una respuesta
19 artículos que te podrían interesar
Ver más sobre
Buen dia Jose, tome tu ejemplo lo acondicione y funciona perfecto. Lo unico es que en equipos PC (Desktop) se ve bien, pero en moviles (telefonos y tablets) no se centra no se reposiciona. Que instruccion le agrego para que lo haga, es decir, se vuelva responsive ?
Gracias, por tu atencion.
Para el caso del ejemplo se podría agregar media queries para adaptar el .popup a los dispositivos móviles.
Funciona muy bien, gracias!, como nota, en el código Html que nos das en el ejemplo no viene la línea que debe ir antes de
ya pude que se cierre automaticamente despues de un intervalo de tiempo igual gracias
Hola,
Si ya lo solucionaste quizá puedas compartir tu solución. Es posible que a otro usuario le pueda resultar útil.
Saludos
hola saludos como hago para que se cierre automaticamente sin tener que dar click en el boton cerrar despues de un intervalo de tiempo ubico esto y no funciona
function closeDialog(id) {
$(‘#’+id).css(‘position’,’absolute’);
$(‘#’+id).animate({‘left’:’-100%’}, 500, function() {
$(‘#’+id).css(‘position’,’fixed’);
$(‘#’+id).css(‘left’,’100%’);
$(‘#overlay’).fadeOut(‘fast’);
});
setInterval(closeDialog, 1000);
}
me podria ayudar en eso de ahi funciona perfectamente pero necesito que se cierre automaticamente luego de medio minuto ejemplo
No me sale, tal vez sea porque no tengo intelado la paqueteria de Jquery como la intsalo?
¿como incluyo la libreria Jquery?
Hola,
La librería jQuery la puedes descargar del sitio oficial y usar CDN para incluirla en tu proyecto.
https://jquery.com/download/
Saludos
Buenas, me funciona bien todo escepto el boton de cancel.png el de cerrar (la x roja), me pueden colaborar, gracias
Hola,
Que problema tienes con el botón para cancelar?
Saludos
esto es lo que necesito pero no me funciono el codigo y lo copie tal cual esta, ¿que puedo hacer?
Hola buenas tardes,
Si pudiéramos ver tu código podríamos darte una respuesta más acertada pero al no verlo solo podemos hacer algunas suposiciones:
– Revisa que hayas incluido bien la librería jQuery. La puedes descargar de http://jquery.com/
Saludos
¿Cómo puedo hacer que sea Responsive? Por lo demás funciona perfecto.
pd: Mandé comentario anterior escribiendo recursivo, por error.
Hola,
Creo que este popup solo se puede hacer responsive usando las media queries. En el siguiente post tienes un ejemplo de uso de media queries:
https://www.jose-aguilar.com/blog/diseno-web-adaptable-flexible/
Quizá también puedas adaptarlo a Bootstrap pero tendrás que cambiar bastantes detalles de maquetación.
Saludos
Cómo puedo hacer que sea Recursivo? Por lo demás funciona perfecto.
Muy, pero muy bueno ….. funciona perfecto. Gracias Jose, un abrazo !!
Buenas he utilizado este trabajo y es muy bueno, me funciona bien, pero quisiera agregarle que solo se mostrara una sola vez, el tema es que tengo el sitio diseñado en php y utilizo mucho los include(‘xxxxx.php’); para no tener que repetir, el tema es que cada vez que navego a una pagina interna se me ejecuta el popup, podría ayudarme en que este solo saliera la primera vez que entran a la web ???? Gracias
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/soporte/
Saludos
Hola buen dia, he hecho un sistema de control de inventarios para una empresa, el sistema esta terminado y funciona correctamente en el navegador (mozilla, edge, opera, chrome), ahora el cliente quiere que el sistema se habrá solo en una ventana independiente al navegador, (lo único que se me ocurrió es en un pop up)..
El sistema usa HTML5 (drag and drop para subida de archivos al servidor, localsotrage, session storage) PHP (variables de sesion) MySQL (commits) AJAX, JSON etc… Sabiendo esto, podre utilizar o mejor dicho, abrir el sistema sin problemas en un po up?
Hola, yo creo que podrás usar cualquier plugin que permita implementar popups para su proyecto. Saludos
Hola, funciona perfecto, pero no logro mostrar el icono rojo en la parte superior derecha para poder cerrarlo… he puesto el png en todos lados pero no hay caso que lo muestre, lo que si se puede hacer es pinchar en esa zona y el pop up se cierra, pero sin mostrar la imagen png cerrar (X)
Hola, quizá te falte añadir los estilos necesarios que se indican en este mismo artículo. Saludos
hola,
estoy tratando de poner un pop up de una promocion http://richietest.webcindario.com/ pero no me carga nada ya utilizaba jquery en los slider en si fue lo unico que no puse de tu referencia espero me puedas ayudar ha ver en que la estoy regando
hola,
Hemos entrado en la web y parece que los popups ya están funcionando, cierto?
Saludos
Hola, me agrada el aporte, todo funciona bien.
Pero dime, hay manera de agregar tiempo para que no solo se cierre con el botón, sino que si no le pinchan se cierre por ejemplo a los 5 segundos.
¿Cómo lo hago?
Hola,
Debes utilizar la función setInterval. Aqui tienes un ejemplo de como usarla:
http://www.jose-aguilar.com/blog/ejecutar-una-funcion-cada-x-segundos-con-jquery/
Saludos
Excelente aporte, solo una duda, habrá posibilidad de que arranque unos 10seg después y no inmediatamente?
Saludos y muchas gracias, excelente pagina 🙂
Hola, puede que usando la función delay de jQuery
a mi me funciona ok, pero en Iexplorer Se monta sobre pantalla negra el overlay
buenas
utilizando tu ejemplo pude hacer lo siguiente
según un dato que se carga en un formulario por el usuario y a través del ajax y jquery busco en una base de dato y muestro esa información en un popup, ahora…. lo que quiero hacer es que el usuario seleccione uno de la lista y completar algunos campos del padre el popup …. tenes algún ejemplo
saludos
Hola!
En caso de que NO quiera que el pop up salga al abrir en la pagina, que se debe cambiar???
En intentado de todo y no lo logro..
Solo necesito que aparezca al hacer click en en enlace, lo cual si esta funcional.. solo necesito que no aparezca al abrir a pagina.
Gracias!
Hola,
No estoy seguro pero diría que lo único que tienes que hacer es quitar del body la llamada a la función que abre el popup.
onload=»openDialog();»
Saludos
Hola
He implementado la solución en mi web, pero no funciona, tengo estas preguntas:
¿Hay que incluir las funciones openDialog y closeDialog dentro del $(document).ready?
Sino es así, ¿cómo hago que se cargue el popup al cargar la página?, porque yo tengo varios plug-in dentro del $(document).ready
Gracias y un saludo
Hola
He implementado tu solución, pero no me funciona, para que cargue el popup ¿hay que incluir dentro del «$(document).ready» las funciones openDialog y closeDialog?
Gracias y un saludo
No hace falta incluirlo en la document ready. En la demo al menos no lo tenemos así
Hola la verdad es que he intentado agregar el popup a un sitio, y lo agrega, pero no funciona como popup. No lo puedo cerrar.
En este momento estoy usando una plataforma para crear webs y la misma me edita el codigo que tu das.
He intentado encontrarle la falla por todos lados, y no hay caso. No se cierra al dar en la cruz, y tampoco funcionan las animaciones, lo cual esto ultimo no me importa tanto, sino me interesa que se cierra, queda como una imagen estatica dentro de la web. ALguien me puede ayudar?
Tendrás que revisar si falla algún script en tu página que hace que no funcione el plugin. Si nos facilitas en enlace de tu web podríamos hecharle un vistazo.
Hola que tal. Si quisiera que apareciera en random la publicidad de un totalde 5, cómo podria hacerle. O en su defecto un carrusel de publicidad en lugar de una sola. Gracias.
Si bien es cierto el post es antigüo pero explica perfectamente el SLIDER, muchas gracias, voy a aplicarlo!
Gracias por el aporte, José, es genial!!!. Creo que hay una pequeña errata.
Donde dice:
Debería decir:
Una pregunta, haber si sabrías responderme. ¿Sería posible que la ventana sólo apareciera una vez?. Es decir, una vez que se pinche sobre el botón cancel no vuelva a aparecer más.
Hola buenas,
De forma rápida se me ocurre que en el enlace de cancelar pongas un href=»» hacia la página con algún parámetro que represente o indique que no se vuelva a abrir la ventana. Algo así:
Y luego si existe ese parámetro en la url anular el popup.
Saludos
Excelente aporte, muchas gracias me ha servido.
Tengo una duda. ya tengo todo el slide popup .
PERO COMO HAGO QUE MI POP UP TENGA LA FUNCION DE INGRESAR A LA PAGINA O RECHAZAR LA PAGINA.
ES DECIR QUE AL MOMENTO QUE ACEPTAS LAS CONDICIONES DE PRIVACIDAD PUEDES VER LA PAGINA…
Y CUANDO LE DES NO ACEPTO TE MANDE A LA PAGINA DE NO ACCESO…
YA LOS LINKS YA LOS TENGO… COMO HAGO ESTAS CONDICIONES.??
hola me gustaría que me ayudaras , trato de insertar el poup en mi sitio web y no me funciona , se queda incrustado en la web como un dato mas y no hace efecto ni nada parecido. pudieras ayudarme por favor,
PD.LA libreria Jquery no me carga de ninguna manera*****
HOla,
Nadie podrá ayudarte si no nos facilitas la url del proyecto para ver en directo el problema
Saludos
Mi pana utiliza esata libreria no tiene que guardarla en tus archivo es una libreria online que te permite acceder a ella sin tener que tener un archivo .js
estas es:
Muchas gracias por el aporte me ayudó mucho
men me puedes decir como agregar la libreria jquery? me parece que es por eso que no le anda funcionando, ¨Por favor agrege el archivo completo para que funcione. Gracias
Saludos, es interesante pero no sale.. podrias verificar y ver.. gracias
como que no sale? a que te refieres?
La Verdad Que no me Sale la imagen me sale en la misma web pero no cargada si no incrustada a que se debe por favor ayudenme
parece buena la idea pero a mi no me funciona.. podrian proporcionar las fuentes para ver donde esta el error? Gracias de antemano
Todo el código está implícito en el artículo. Solo tienes que ponerlo correctamente y cargar la librería jQuery. Fíjate sobretodo en eso.
el codigo HTML es incorrecto. falta un div «overlay»
Excelente aporte me sirvio muchisimo gracias por compartir