SweetAlert, alertas personalizadas con interfaz profesional

DESCARGA : SeetAlert

SweetAlert, alertas personalizadas con interfaz profesional, una buena opción si aún no usas algún modal de jquery, bootstrap u otro framework. SweetAlert tiene diferentes presentaciones, la compatibilidad que tiene es la de adaptarse a cualquier equipo sin importar si es un dispositivo móvil, escritorio, este plugin tiene varias opciones como:

 

 

1.- Podemos encontrar mensaje básico (mensaje de texto y título).

2.- Mensajecon tiempo de cerrado.

3.- Mensaje de peligro y con una función agregada a un evento.

4.- También podemos encontrar un mensaje donde se le puede agregar  parámetros y se puede ejecutar con un botón la cancelación, esto es para mantener parámetros.

5.- Por último también podemos encontrarnos un mensaje con un icono.

La manera de instalarse es muy sencilla, vamos a tener que agregar las siguientes lineas de código:


<script src="lib/sweet-alert.min.js"></script>

<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">

 

Posteriormente vamos a implementar el siguiente script y configurar los parámetros correspondientes:

swal({   title: "Error!",text: "Heres my error message!",   type: "error",confirmButtonText: "Cool"});

Demostración: http://tristanedwards.me/sweetalert

Titlenull (required)El título.
textnullDescripción de la notificación.
typenullTipo: “warning“, “error“, “success” e”info”.
allowOutsideClickfalseSi hay un evento para cerrar.
showCancelButtonfalseSi hay un evento para cancelar.
confirmButtonText“OK”Botón de confirmación
confirmButtonColor“#AEDEF4”Color del botón de confirmación
cancelButtonText“Cancel”Texto del botón de cancelar
closeOnConfirmtrueTexto del botón de confirmar
imageUrlnullUrl de la imagen para mostrar en el modal.
imageSize“80×80”Tamaño de la imagen.
timernullTimepo de cerrado del modal en millisegundos.

Puede interesarte