Saltar al contenido

Elegantes Efectos Modales con CSS y JavaScript 2018

29 abril, 2018
efectos modales con css

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!

¿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:

Después de importar la librería en nuestra página llamaremos a la función swall, con nuestro mensaje.

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:

Y con un tercer argumento podemos añadir un icono de alerta. Tenemos disponibles 4 tipos diferentes: "warning", "error", "success" e "info".

Anidando ventanas modales

Pero esto no es todo. Esta estupenda librería nos permite anidar ventanas modales para mostrar nuestros mensajes.

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.

Conclusión

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!

Contenido Relacionado