Pop up en el footer con jQuery

//Pop up en el footer con jQuery

Ejemplo de un Pop up en el footer con jQuery, en este caso un formulario para suscribirse a una newsletter.
pop up con jquery

ARCHIVO HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll hacia un elemento html</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>

<body>
<div class="content">

    <h1>Pop up en el footer con jQuery</h1>                                 

    <p>Al cargar la página, a los 3 segundos mostramos con jQuery un Pop Up en el footer con un formulario, en este caso de una newsletter.</p>

    <div class="newsletter" style="display: none;">
        <div class="newsletter-imagen"></div>
        <div class="newslettr-form">
            <div class="cerrar-newsletter"><img src="images/cerrar.png"></div>
            <h4>Ejemplo Newsletter.</h4>
            <form>
                <label>Email</label><br>
                <input type="text" name="email" title="Email" value="">
                <input type="submit" value="¡Suscríbete!">
            </form>
        </div>
    </div>

</div>
</body>
</html>

ARCHIVO JQUERY

// JavaScript Document

$(document).ready(function() {

    //Ocultamos por css y jQuery el newsletter
    $(".newsletter").css("display","inline");
    $(".newsletter").hide();

    //A los 3 segundos se muestra el newsletter
    $(".newsletter").delay(3000).slideDown();

    $(".newsletter .cerrar-newsletter").click(function () {
        $('.newsletter').slideUp();
    });

});

ARCHIVO CSS

@charset "utf-8";
/* CSS Document */

body{
	background:#81d742;
}
.content{
	width:1000px;
	margin-top:50px;
	min-height:600px;
	background:#fff;
	margin:0 auto;
	padding:20px;
}
.newsletter {
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 99998;
    width: 450px;
    padding: 0px 10px;
    box-shadow: 0px 60px 50px #333;
    color: #fff;
    border-radius: 15px 15px 0 0;
    margin-left: 15px;
    background: url('images/r2.png') repeat top left transparent;
    border: 1px solid #fff;
    height: 150px;
}
.newsletter-imagen {
    background: url('images/newsletter.png') no-repeat top left transparent;
    float:left;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 15px 0 0 0px;
}
.newslettr-form {
    float: right;
    width: 300px;
}
.cerrar-newsletter {
    position: absolute;
    margin-left: 254px;
    margin-top: 5px;
    cursor: pointer;
}
input
[type="submit"] { padding: 5px 15px; margin-top: 10px; } input[type="text"] { width: 100%; }

Pop up en el footer con jQuery

Escribe tu comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies