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[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][type="submit"] {
    padding: 5px 15px;
    margin-top: 10px;
}
input[type="text"] {
    width: 100%;
}

 

Pop up en el footer con jQuery