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!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (13 votos, promedio: 4,08 de 5)
Cargando…
Comparte en las redes sociales

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

  1. Hugo dice:

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

  2. hugo dice:

    ¿como incluyo la libreria Jquery?

  3. Emerson Vera dice:

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

  4. alejandro dice:

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

  5. Jose dice:

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

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

  6. Jose dice:

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

  7. Raul Ortiz dice:

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

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

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

  10. 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)

Deja un comentario

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