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!

Calificación de Lectores
[Total: 2 Media: 2.5]

2 thoughts on “Elegantes Efectos Modales con CSS y JavaScript 2018

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar