Elegantes Efectos Modales con CSS y JavaScript 2021

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!

Índice Contenido

¿En que consiste las Efectos Modales con CSS?

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.

Cargando SweetAlert

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"
});

Anidando ventanas modales

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}`);
});

Aceptar o Cancelar

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!");
  }
});