Main menu

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.

Ver demo Descargar ejemplo

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Google+ Compartir en Linkedin
  • Raul Granados

    Hola amigos de Endeos. He descubierto hoy estas ventanas y me parecen muy interesantes. Las estoy intentando implementar en una web que estoy haciendo…pero me encuentro con un problema.
    Me gustaría que al hacer un INSERT en una base de datos me saltara un mensaje succes de sweetAlert informando que el registro se ha insertado correctamente… pero estoy encontrando que estas ventanas SIEMPRE se activan con un boton en el evento onclik. ¿Sabéis si hay alguna manera de que salte automáticamente? Tengo el código de la funcion que intento que funcione, por si necesitais verlo. Me echaríais una mano enooorme si sabeis algo del tema.
    Gracias.

    • blogendeos

      Buenos días Raul,

      Gracias por seguir nuestro blog. Entendemos que para hacer el INSERT estás usando PHP. jQuery se ejecuta desde el lado cliente, mientras que PHP se ejecuta desde el lado servidor, por lo tanto quizás puedas ayudarte usando Ajax, pero puedes probar con un echo tambien, por ejemplo:

      if( /*insert hecho correctamente*/ ){
      echo “jQuery(function(){ /*código del sweet alert success*/ });”;
      }

      Saludos.

      • Raul Granados

        Buenos días, gracias por tu respuesta. Pero sigue sin funcionar, he probado siguiendo tu indicación varias maneras de implementar la llamada con ajax…pero nada. Me sigo haciendo la misma pregunta ¿Sabes si alguien ha utilizado este tipo de ventanas ‘automáticamente’? Es decir sin tener que apretar un botón. Es que si llamo a la función desde un botón siempre funciona.

        Lo que yo me pregunto una y otra vez es: Si funciona esto:

        if ($Result1){
        //OK
        echo ”;
        echo ‘alert(“Perfecto, video cargado correctamente”)’;
        echo ”;
        }

        ¿cómo puede ser que no funcione esto?

        if ($Result1){
        //OK
        echo ”;
        echo ‘swal({” “});’;
        echo ”;
        }

        ¿o esto?

        if ($Result1){
        //OK
        echo ”;
        echo ‘sweetAlert(“Perfecto”,”video cargado correctamente”,”success”);’;
        echo ”;
        }

        De verdad…no entiendo. Por eso mi insistencia en si alguien lo ha utilizado automáticamente. Se que soy insistente con esta pregunta… pero nadie me responde a eso!!

    • blogendeos

      Hola de nuevo Raul,

      Te confirmo que lo hemos probado con el echo y nos funciona, aunque hemos olvidado poner el tag “script”, sería así:

      if( /*insert hecho correctamente*/ ){
      echo “jQuery(function(){ /*código del sweet alert success*/ });”;
      }

      Y este condicional siempre ha de ir por debajo de la llamada a la biblioteca jQuery. Vamos a ampliar el artículo y subiremos una nueva demo descargable con este código.

      Saludos.

  • Francisco

    Hola estimados, logre implementarlo pero necesito saber en mi caso porque cuando se levanta el alert el programa sigue corriendo y no espera a que acepte el mensaje que me aparece. Favor alguien me podría ayudar, Saludos!

    • blogendeos

      Buenos días Francisco, gracias por visitar nuestro blog.

      ¿Qué código estás usando? En la demo tienes un ejemplo de cómo ejecutar unas acciones según si se acepta o se declina, concretamente mira el código que tenemos en la demo de “Mensaje según condición”. Este te debería servir, ya nos dirás.

      Saludos.

    • Juan

      Hola Francisco. A mi me sucede lo mismo. ¿Pudiste solucionar este inconveniente? Yo programo en VB Net de VS 2012. Utilizo llamadas al estilo: ScriptManager.RegisterStartupScript(Me, GetType(Page), “alerta”, “swal(‘Atención!’, ‘El Nombre del Sector ingresado ya existe en este Organismo.’);”, True).
      Pero al usar por ejemplo desde HTML con un button (por ejemplo para eliminar registros) y el evento OnClientClick(swal…. (con el ejemplo que te menciona (blogendeos del “Mensaje según condición”), el programa
      no espera la confirmación, elimina el registro y sigue la ventana esperando que confirmes y el registro ya fué eliminado.
      Tiene solución esto? o sweetAlert es otro de esos adornitos bonitos para practicantes novatos, como otros tantos y que a la hora de la verdad, no funcionan como dicen? Te mando un gran saludo.

  • Andrés Villamarín

    Buen dia, el ejemplo lo aplique a mi trabajo y funciona bien, pero necesito que cuando aparezca el mensaje, al pulsar el boton “ok”, vuelva a la ventana anterior. Gracias por su colaboración.

    • blogendeos

      Hola Andrés,

      Si lo que quiere es que al hacer clic en el “ok” recargue la página anterior, puede hacerlo, por ejemplo, con jQuery. Le pone al botón de “ok” un identificador, por ejemplo “botonOk” y con jQuery puede hacer algo así:

      jQuery(“#botonOk”).click(function(){
      parent.history.back();
      return false;
      });

      • Andrés Villamarín

        Gracias por la respuesta, pero no logro encontrar donde poner el identificador en el botón.

        • blogendeos

          Hola de nuevo Andrés. Disculpa el descuido por nuestra parte, tienes razón. Directamente al botón va a ser complicado darle un identificador, pero sí que puedes usar el parámetro de configuración “customClass” para darle una clase CSS personalizada a tu ventana modal y a partir de ahí llegar al botón, por lo tanto el código jQuery quedaría mas o menos así:

          jQuery(“.clasePersonalizada .confirm”).click(function(){
          parent.history.back();
          return false;
          });

          Donde la clase “confirm” es la que tiene el propio botón “ok” por defecto. Esperamos que te sea de ayuda 🙂

          • Andrés Villamarín

            Gracias por su colaboración, encontré una solución mas directa a lo que buscaba, haciendo uso de lo que me habían recomendado anteriormente:

            parent.history.back();
            return false;
            break;

            Eso lo hice, editando el archivo .js en el case ‘click’.

            Me dieron la luz….. Gracias totales.

  • Andrés Villamarín

    Amigos, feliz tarde, nuevamente por aqui, resulta que he estado utilizando el script para un sistema que estoy creando, asi como lo mencioné en dias anteriores; pero de repente, me dejó de funcionar, ensayé de todo, pero parece ser que hay o tengo algo mal al llamar la funcion, no se si me puedan colaborar. Gracias por sus comentarios.

    La función la tengo asi:

    if(condicion){
    echo ‘jQuery(function(){swal(“¡El Número de Identificación $num_id ya se encuentra registrado en la Asignatura $idio.!”, “Por favor rectificar los datos ingresados.”, “error”);});’;
    }

    • blogendeos

      Buenos días Andrés,

      Solo tienes un pequeño fallo, todo el contenido del “echo” debe ir en comillas dobles (“), no simples (‘). Entonces te funcionará bién 🙂

      if(condicion){
      echo “jQuery(function(){swal(“¡El Número de Identificación $num_id ya se encuentra registrado en la Asignatura $idio.!”, “Por favor rectificar los datos ingresados.”, “error”);});”;
      }

      • Andrés Villamarín

        Gracias por la respuesta, pero no funciona, ya cambié el código con ” asi como me sugeriste, algo le pasa al script, funcionaba bien, pero no se que ocurrió! Si podrías darme otra luz….. Gracias.

        • blogendeos

          Hola de nuevo Andrés,

          Si pruebas con el código de la demo que puedes descargar con la doble comilla verás que funciona, por lo tanto yo apostaría a que el error viene de algún otro sitio, no te muestra ningún error la consola del navegador? Te aconsejamos usar la extensión Firebug de Firefox.

          • Andrés Villamarín

            Gracias por responder. Pero no funcionó, logré corregirlo quitando jQuery(function() y dejandolo directo, así:

            if(condicion){
            echo “swal(“¡El
            Número de Identificación $num_id ya se encuentra registrado en la
            Asignatura $idio.!”, “Por favor rectificar los datos ingresados.”,
            “error”);”;
            }

            Allí ya ejecuta la condición y muestra la notificación como corresponde. Gracias de todas maneras.

  • rolfe

    BUENA NOCHE TENGO UNA DUDA COMO HAGO PARA QUE CUANDO DE EN EL BOTON OK ME LLEVE A OTRA PAGINA NO HE LOGRADO HACERLO. GRACIAS EL CODIGO
    jQuery(function(){
    swal(‘¡Bien!’, “Condición cumplida”, “success”);
    });

    • blogendeos

      Hola rolfe, ¿has probado a añadir una redirección con javascript en la función que se ejecuta (justo después del mensaje de confirmación)?

      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”);

      //Aquí pones tu redirección

      });

      • Rolfe

        Hola, si ya lo hise incluso lo hice asi, pero no asi no anda solo muestra la pagina en blanco, no se si se hara asi descarge los ejemplos y vi esta asi como me lo has dicho, uando abro la pagina me imprime lo mismo que tu me respondistes. nada mas le pongo al inicio al final y no muestra ni la ventana de alerta. que podria hacer gracias y si me podrias ayudar estoy atrasado con esa parte gracias

        • blogendeos

          Hola Rolfe, nosotros hemos hecho la prueba con el código base y nos funciona correctamente la redirección. Si te sale la página en blanco significa que hay algún error en el código, tendrías que hacer debug con la consola de errores del navegador.

          Si coges el código base de nuestra demo y pones la redirección tal y como te indicaba en el anterior mensaje, verás que funciona.

  • Andres

    Buenas noches, estoy implementado su ejemplo pero no he podido aplicar la redirección de pagina me podrían orientar. Graias

    • blogendeos

      Hola Andres,

      ¿Cuándo quieres la redirección? ¿Te sale algún error? Si nos das un poco más de información quizás podamos ayudarte. En un mensaje anterior ya comentamos que para hacer una redirección puedes usar la función que hay justo después del mensaje de confirmación, como en este ejemplo:

      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”);

      //Aquí pones tu redirección

      });

      • Andres

        ya lo logre GRACIAS
        a quien le pueda ayudar lo deje asi:

        echo ‘jQuery(function(){swal({
        title:”Error”,text:”Debe completar todos los Campos”,type:”warning”,confirmButtonText:”Aceptar”
        },function(){location.href=”../”;});});’;
        //Se devuelve al index

        en un archivo php

  • Jose Luis

    no me muestra el alert en php tengo esto
    echo “jQuery(function(){ Deve Ingresar Rut });”;
    si alguien me ayuda porfa

    • blogendeos

      Hola @disqus_z9ZgDHjwAT:disqus , fíjate en nuestro ejemplo, no lo tienes igual, te falta llamar a la función “swal”:

      echo “jQuery(function(){swal(“¡Bien!”, “Condición cumplida”, “success”);});

  • julio zambrano

    me sale el mensaje de alert pero demaciado rapido y se quita automaticamente como hago para que no me salga asi que estoy haciendo mal?

    • blogendeos

      Hola @disqus_43B4IshWPd:disqus, tu error puede ser por varios motivos. Si te descargas nuestra demo puedes trabajar en base a ella para ver cómo funciona el plugin. También te aconsejamos revisar la consola de errores del navegador, quizás te dé alguna pista.

  • omar aouidat aguilar

    buenas, como puedo pasar una variable a la función de swal?

    • blogendeos

      Hola Omar, ¿Podrías darnos algún detalle más sobre lo que quieres hacer? En la demo puedes ver varios ejemplos de uso.

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más

ACEPTAR
Aviso de cookies