Para el día de hoy os he preparado un colección de efectos modales con CSS y JavaScript que harán las delicias de los amantes. Para ello usaremos SweetAlert. ¡Vamos al lío!
Un efecto modal no es otra cosa que una ventana emergente o pop up que nos muestra un mensaje en pantalla.
Para ello realizaremos una acción, generalmente sobre un botón, que lanzará la alerta.
Los efectos modales con CSS son muy útiles, tanto para mostrar mensajes de error, como de suscripción o cualquier otro mensaje que necesitemos.
Antes de nada debemos de cargar en nuestro código la librería SweetAlert. Para ello tecleamos el siguiente código:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Después de importar la librería en nuestra página llamaremos a la función swall, con nuestro mensaje.
swal("¡Hola Mundo!");
Pero aquí no acaba todo, podemos realizar diferentes configuraciones.
En el siguiente ejemplo podemos poner un título y un texto a nuestros efectos modales en CSS:
swal("¡Aquí el título!", "...y aquí el texto!");
Y con un tercer argumento podemos añadir un icono de alerta. Tenemos disponibles 4 tipos diferentes: "warning"
, "error"
, "success"
e "info"
.
swal({
title: "Buen Trabajo!",
text: "¡Has pulsado el botón!",
icon: "success",
button: "Continuar"
});
Pero esto no es todo. Esta estupenda librería nos permite anidar ventanas modales para mostrar nuestros mensajes.
swal("Gracias por suscribirte.")
.then((value) => {
swal(`No olvides visitar nuestro blog: ${value}`);
});
Otra de las grande opciones de SweetAlert es que nos permite dar opciones a nuestros usuarios. Por ejemplo cuando queremos eliminar un archivo.
swal({
title: "¿Estás seguro?",
text: "¡Una vez que elimines el archivo no podrás recuperarlo!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("¡Has eliminado con éxito el archivo!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
Sin ninguna duda Sweetalert es una de las librerías más completas que encontrarás para generar ventanas modales.
Cuenta con multitud de opciones que podéis consultar en su página web, y que sin duda os encantarán.
Si os ha gustado no olvidéis dejar vuestros likes, estrellas y como no, compartir con vuestros amigos en las redes sociales. ¡Gracias!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios