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.

camara

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;
}

Ver el ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(14 votos, promedio: 5 de 5)
Comparte en las redes sociales

52 respuestas a “jQuery Slide Popup al cargar la página”

  1. wilmer G dice:

    ya pude que se cierre automaticamente despues de un intervalo de tiempo igual gracias

  2. wilmer G dice:

    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

  3. Hugo dice:

    No me sale, tal vez sea porque no tengo intelado la paqueteria de Jquery como la intsalo?

  4. hugo dice:

    ¿como incluyo la libreria Jquery?

  5. Emerson Vera dice:

    Buenas, me funciona bien todo escepto el boton de cancel.png el de cerrar (la x roja), me pueden colaborar, gracias

  6. alejandro dice:

    esto es lo que necesito pero no me funciono el codigo y lo copie tal cual esta, ¿que puedo hacer?

    • Jose Aguilar dice:

      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

  7. Jose dice:

    ¿Cómo puedo hacer que sea Responsive? Por lo demás funciona perfecto.

    pd: Mandé comentario anterior escribiendo recursivo, por error.

  8. Jose dice:

    Cómo puedo hacer que sea Recursivo? Por lo demás funciona perfecto.

  9. Raul Ortiz dice:

    Muy, pero muy bueno ….. funciona perfecto. Gracias Jose, un abrazo !!

  10. Inti dice:

    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

  11. Carlos Lopez dice:

    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?

  12. samuel dice:

    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)

  13. Richie dice:

    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

  14. Gerardo dice:

    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?

  15. Alfonso dice:

    Excelente aporte, solo una duda, habrá posibilidad de que arranque unos 10seg después y no inmediatamente?
    Saludos y muchas gracias, excelente pagina 🙂

  16. adrian dice:

    a mi me funciona ok, pero en Iexplorer Se monta sobre pantalla negra el overlay

  17. hector dice:

    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

  18. Isa dice:

    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!

    • Jose Aguilar dice:

      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

  19. Juan Garcia dice:

    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

  20. Juan Garcia dice:

    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

  21. Gisele dice:

    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?

    • Jose Aguilar dice:

      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.

  22. David dice:

    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.

  23. Posicionamiento SEO dice:

    Si bien es cierto el post es antigüo pero explica perfectamente el SLIDER, muchas gracias, voy a aplicarlo!

  24. Chechu dice:

    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.

    • Jose Aguilar dice:

      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

  25. Pablo Castillo Conde dice:

    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.??

  26. yandry dice:

    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*****

    • Jose Aguilar dice:

      HOla,

      Nadie podrá ayudarte si no nos facilitas la url del proyecto para ver en directo el problema

      Saludos

    • Jose Garcia dice:

      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:

  27. daniel arrona dice:

    Muchas gracias por el aporte me ayudó mucho

  28. juan luis dice:

    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

  29. bryan dice:

    Saludos, es interesante pero no sale.. podrias verificar y ver.. gracias

  30. Richard dice:

    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

  31. walter dice:

    parece buena la idea pero a mi no me funciona.. podrian proporcionar las fuentes para ver donde esta el error? Gracias de antemano

  32. Sergio dice:

    Excelente aporte me sirvio muchisimo gracias por compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre