En este artículo, le mostraremos cómo crear un cuadro emergente automático personalizado para suscribirse a cualquier servicio. Es posible que a menudo te encuentres con un cuadro emergente que te pide suscribirte a cualquier servicio cuando visitas un sitio en particular. Por lo tanto, en este artículo, aprenderá cómo personalizar ese cuadro emergente y crear el suyo propio. Usaremos código simple HTML, CSS, Bootstrap y jQuery para demostrar el procedimiento.
Explicación:
En primer lugar, necesitamos crear un archivo index.html y pegar el siguiente código del archivo index.html en él. Este archivo index.html incluye el archivo app.js en la parte inferior de la etiqueta del cuerpo. Ahora, en el archivo app.js , escriba la función jQuery ready que se ejecuta solo cuando el documento está listo. Después de eso, está la función setTimeout() que se ejecuta después de 3 segundos, y en esa función setTimeout() , mostraremos el cuadro emergente como ‘bloque’ para que sea visible después de 3 segundos. Luego, hemos aplicado el evento de clic en dos botones después de que tan pronto como alguien haga clic en él, la visualización del cuadro emergente se convierte en ‘ninguno’.
Código HTML:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <title>Automatic Pop-Up </title> </head> <body> <h1 class= "text-center text-white mt-5 font-weight-bold"> Automatic Pop-Up using jQuery </h1> <br /> <br /> <div class="POPmain" style="display: none;"> <div id="popup"> <input type="email" class= "text-center w-50 form-control mt-5" id="emailId" placeholder="type your email here..." /> <button class= "submitId btn btn-primary font-weight-bold mt-5"> Subscribe </button> <button class= "submitId btn btn-primary text-center font-weight-bold mt-5"> No, Thanks </button> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
Código CSS:
body{
height: 200vh;
width: 100%;
background: rgba(0, 0, 0, .5);
z-index: 111;
}
#popup{
width: 550px;
height: 250px;
background-image:
url(https://images-na.ssl-images-amazon.com/
images/I/31Xl85rQxbL._SY355_.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 2px 2px 5px 3px white;
}
#emailId{
text-align: center;
position: absolute;
left: 25%;
top: 25%;
}
.submitId {
position: relative;
top: 130px;
left: 180px;
}
JavaScript:
Javascript
<script>
// When document is ready
$(document).ready(function(){
// SetTimeout function
// Will execute the function
// after 3 sec
setTimeout(function(){
$('.POPmain').css(
'display', 'block');
}, 3000)
});
$('.submitId').click(
function(){
$('.POPmain').css(
'display', 'none');
});
</script>
Código completo:
Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<title>Automatic Pop-Up</title>
<style>
body {
height: 200vh;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 111;
}
#popup {
width: 550px;
height: 250px;
background-image: url(
https://images-na.ssl-images-amazon.com/images/I/31Xl85rQxbL._SY355_.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 2px 2px 5px 3px white;
}
#emailId {
text-align: center;
position: absolute;
left: 25%;
top: 25%;
}
.submitId {
position: relative;
top: 130px;
left: 180px;
}
</style>
</head>
<body>
<h1 class=
"text-center text-white mt-5 font-weight-bold">
Automatic Pop-Up using jQuery
</h1>
<br />
<br />
<div class="POPmain"
style="display: none;">
<div id="popup">
<input type="email"
class=
"text-center w-50 form-control mt-5"
id="emailId"
placeholder=
"type your email here..." />
<button class=
"submitId btn btn-primary font-weight-bold mt-5">
Subscribe
</button>
<button class=
"submitId btn btn-primary text-center font-weight-bold mt-5">
No,Thanks
</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
// When document is ready
$(document).ready(function () {
// SetTimeout function
// Will execute the function
// after 3 sec
setTimeout(function () {
$(".POPmain").css("display", "block");
}, 3000);
});
$(".submitId").click(function () {
$(".POPmain").css("display", "none");
});
</script>
</body>
</html>
Salida: cuando abra el archivo index.html en su navegador, verá el siguiente resultado después de 3 segundos.
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA