Ejemplo de un Pop up en el footer con jQuery, en este caso un formulario para suscribirse a una newsletter. Para entender mejor las funciones utilizadas en este ejemplo, te recomendamos consultar la documentación oficial de jQuery donde encontrarás referencias completas de todos los métodos.
¿Cuál es el 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>
¿Cuál es el 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();
});
});
¿Cuál es el 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
Pop up newsletter con jQuery
- Pop up que aparece automáticamente en el footer tras 3 segundos de cargar la página
- Formulario de suscripción a newsletter con campo de email y botón de envío
- Implementado con jQuery para mostrar y ocultar el elemento con animaciones
- Botón de cierre dentro del pop up permite al usuario cerrarlo cuando lo desee
- Diseño fijo en la parte inferior de la pantalla con posicionamiento CSS fixed
