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

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

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