Ejemplo de un Pop up en el footer con jQuery, en este caso un formulario para suscribirse a una newsletter.
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%;
}
