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.

You may also like...

  • Rodrigo

    Hola amigo soy un poco nuevo en esto, podrías darme un ejemplo completo de como usar estas alertas.. Saludos

  • Develoteca

    Aquí tienes un vídeo explicativo

    https://www.youtube.com/watch?v=dpFBBVEq9dk&feature=youtu.be

    Saludos.

  • William Potosí Díaz

    Hola, tengo una inquietud acerca de la fuente para usar el resto de funciones que permite esta librería, pues el link para la demostración no se encuentra disponible. ¿Podrían facilitarme información acerca de estos? Les agradecería mucho.