Notificaciones al usuario con jQuery Sweet Alert

Hay muchas formas de lanzar notificaciones o alertas en una web. Una de esas formas es usando la función alert de JavaScript, que muestra una caja de alerta con un mensaje que indiquemos. En los tiempos que corren esta es una opción muy poco estética. Con Sweet Alert conseguimos dar a los usuarios notificaciones y alertas de un modo mucho más visual.

Con este plugin jQuery daremos un aspecto a los mensajes que lancemos a los usuarios acorde a las tendencias actuales. Además, tenemos la posibilidad de configurar el plugin de muchas formas diferentes.

Qué necesitamos

Biblioteca jQuery
Fichero JavaScript sweetalert.min.js
Fichero CSS sweetalert.css

Descargar ficheros del plugin jQuery Sweet Alert.

Preparando el terreno

Deberemos hacer la llamada a la biblioteca jQuery así como a los ficheros sweetalert.min.js y sweetalert.css que colocaremos en nuestra carpeta de scripts y estilos respectivamente. También haremos la llamada a nuestro archivo personalizado de funciones JavaScript, que en nuestro caso hemos llamado functions.js:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Custom functions file -->
<script src="js/functions.js"></script>
<!-- Sweet Alert Script -->
<script src="js/sweetalert.min.js"></script>
<!-- Sweet Alert Styles -->
<link href="css/sweetalert.css" rel="stylesheet">

Empieza la acción

En nuestro fichero functions.js inicializaremos el plugin cuando nos haga falta, por ejemplo, al completar un registro de usuario, al necesitar la confirmación por parte del usuario antes de realizar una acción, etc.

Para lanzar le mensaje, haremos lo siguiente:

swal("Texto del mensaje");

Este es el ejemplo más básico, pero puedes hacer mucho más, en la demo que te hemos preparado puedes comprobarlo y ver el código necesario.

Llamada desde PHP

Si necesitamos lanzar un mensaje cuando se cumpla una cierta condición en nuestro código PHP, podemos aprovecharnos de la función echo, por ejemplo:

<?php 
if ( /*condición*/ ) {
  echo "<script>jQuery(function(){swal(\"¡Bien!\", \"Condición cumplida\", \"success\");});</script>";
}
?>

Ver demo Descargar ejemplo

Parámetros de configuración del plugin

title: título de la ventana modal.
text: descripción de la ventana modal.
type: tipo de ventana modal. Los valores posibles son warning, error, success y info. También es posible poner el valor input para que el usuario pueda introducir su propio texto.
allowEscapeKey: los valores posibles son true o false. Al ponerlo en true permitimos que el usuario pueda cerrar la ventana modal con el botón escape.
customClass: clase CSS personalizada para la ventana modal.
allowOutsideClick: los valores posibles son true o false. Al ponerlo en true permitimos que el usuario cierre la ventana modal haciendo clic fuera de la misma.
showCancelButton: pondremos true o false según si queremos mostrar el botón de cancelar o no.
showConfirmButton: pondremos true o false según si queremos mostrar el botón de aceptación o no.
confirmButtonText: string para cambiar el texto por defecto del botón de aceptación.
confirmButtonColor: valor hexadecimal del color de fondo del botón de aceptación.
cancelButtonText: string para cambiar el texto por defecto del botón cancelar.
cancelButtonColor: valor hexadecimal del color de fondo del botón cancelar.
closeOnConfirm: admite los valores true o false. Pondremos false cuando nos interese que la ventana modal permanezca abierta cuando el usuario presione el botón de aceptación.
closeOnCancel: igual que closeOnConfirm pero con el botón de cancelación.
imageUrl: para añadir un icono personalizado para la ventana modal. Debe ser un string con la ruta hacia la imagen.
imageSize: en caso de haber indicado una URL de imagen (parámetro anterior), podemos indicar el tamaño que debe tener. Hay que poner dos valores en píxels separados con «x», el primero para el ancho y el segundo para el alto. Por ejemplo: «85×60».
timer: indicaremos los milisegundos que deben transcurrir para que la ventana modal se cierre automáticamente.
html: permite los valores true y false. Si ponemos true podremos poner poner etiquetas HTML en los parámetros title y text.
animation: admite los valores true y false. Si ponemos false la animación de abertura de la ventana modal se desactiva.
inputType: podemos indicar el tipo de campo input cuando el valor del parámetro type está en input.
inputPlaceholder: en caso de usar el valor input en el parámetro type, podemos indicar un placeholder.
inputValue: en caso de usar el valor input en el parámetro type, podemos indicar el valor del campo.

Ejemplo de uso:

swal({ 
 title: "¿Seguro que deseas continuar?", 
 text: "No podrás deshacer este paso...", 
 type: "warning", 
 showCancelButton: true,
 cancelButtonText: "Mmm... mejor no", 
 confirmButtonColor: "#DD6B55", 
 confirmButtonText: "¡Adelante!", 
 closeOnConfirm: false }, 

 function(){ 
 swal("¡Hecho!", 
 "mensaje de confirmación.", 
 "success"); 
 });

Para ver el plugin en acción visita la demo que te hemos preparado. Si quieres ver más efectos puedes mirar el GitHub oficial del desarrollador del plugin. En caso de que tengas dudas sobre cómo usar el plugin, puedes dejarnos un comentario y te responderemos encantados.