Mostrar una ventana modal autom?tica con animaci?n 3 segundos
Más de un año
0
0
276
Para mostrar una ventana modal autom?tica con animaci?n en una p?gina web, puedes utilizar HTML, CSS y JavaScript. A continuaci?n, te muestro un ejemplo b?sico que muestra c?mo hacerlo. Esta modal aparecer? autom?ticamente tres segundos despu?s de que el usuario ingrese a la p?gina.
C?digo
Explicaci?n
Puedes copiar y pegar estos bloques de c?digo en tus archivos correspondientes y abrir el archivo HTML en un navegador para ver la modal en acci?n.
C?digo
? ? <div id="modal" class="modal">
? ? ? ? <div class="modal-content">
? ? ? ? ? ? <span class="close">?</span>
? ? ? ? ? ? <h2>?Bienvenido!</h2>
? ? ? ? ? ? <p>Este es un mensaje de bienvenida que aparece autom?ticamente.</p>
? ? ? ? </div>
? ? </div>
?<style>
?body {
? ? font-family: Arial, sans-serif;
}
.modal {
? ? display: none; /* Ocultar por defecto */
? ? position: fixed;?
? ? z-index: 1;?
? ? left: 0;
? ? top: 0;
? ? width: 100%;?
? ? height: 100%;?
? ? overflow: auto;?
? ? background-color: rgb(0,0,0);?
? ? background-color: rgba(0,0,0,0.4);?
? ? animation: fadeIn 0.5s; /* Animaci?n de entrada */
}
.modal-content {
? ? background-color: #fefefe;
? ? margin: 15% auto;?
? ? padding: 20px;
? ? border: 1px solid #888;
? ? width: 80%;?
? ? animation: slideIn 0.5s; /* Animaci?n de entrada */
}
.close {
? ? color: #aaa;
? ? float: right;
? ? font-size: 28px;
? ? font-weight: bold;
}
.close:hover,
.close:focus {
? ? color: black;
? ? text-decoration: none;
? ? cursor: pointer;
}
/* Animaciones */
@keyframes fadeIn {
? ? from { opacity: 0; }
? ? to { opacity: 1; }
}
@keyframes slideIn {
? ? from { transform: translateY(-50%); }
? ? to { transform: translateY(0); }
}
</style>
<script>
// Esperar 3 segundos y mostrar la modal
setTimeout(function() {
? ? document.getElementById("modal").style.display = "block";
}, 3000);
// Cerrar la modal cuando se hace clic en <span> (x)
document.querySelector(".close").onclick = function() {
? ? document.getElementById("modal").style.display = "none";
}
// Cerrar la modal si el usuario hace clic fuera de ella
window.onclick = function(event) {
? ? const modal = document.getElementById("modal");
? ? if (event.target === modal) {
? ? ? ? modal.style.display = "none";
? ? }
}
</script>
Explicaci?n
- HTML: Creamos una estructura b?sica con una modal que contiene un t?tulo, un mensaje y un bot?n para cerrarla.
- CSS: Estilizamos la modal y aplicamos animaciones para que aparezca suavemente en el centro de la pantalla.
- JavaScript: Usamos setTimeout para mostrar la modal despu?s de 3 segundos. Tambi?n manejamos el evento de clic para cerrar la modal.
Puedes copiar y pegar estos bloques de c?digo en tus archivos correspondientes y abrir el archivo HTML en un navegador para ver la modal en acci?n.
Tienes que ser miembro para responder en este tema
Últimos comentarios
