[jQuery] Instalar y usar el plugin SweetAlert 2

 

El plugin SweetAlert 2 sirve para mostrar alertas tipo “alert” bonitas, responsive, personalizables y accesibles.

Las alertas normales sirven para mostrarle información al usuario, con el plugin Sweet Alert 2 lograremos darle una mejor impresión al usuario.

Las alertas son una especie de ventanas modales que se adaptan perfectamente a su funcion.

Instalar SweetAlert 2

Para descargar SweetAlert 2 Debemos ir a la pagina oficial https://sweetalert2.github.io/ y descargar la ultima versión, necesitaremos el archivo sweetalert2.css y sweetalert2.js.

Después debemos copiar los archivos a nuestro proyecto e incluir las librerías en la etiqueta head.

[code language=”html”] <link rel="stylesheet" type="text/css" href="sweetalert/sweetalert2.min.css">
<script type="text/javascript" src="sweetalert/sweetalert2.min.js" ></script>[/code]

Hecho esto podemos empezar a usar el plugin.

Usar SweetAlert 2

Para usar el plugin debemos usar la funcion “swal” que con el uso de varios parámetros hacemos que el plugin se comporte de manera diferente.

Ejemplo 1

Tenemos un botón que llama a la funcion swal.

[code language=”html”] <button id="button1" class="btn btn-success">Opcion 1</button>[/code]

Después un script javascript, recuerden ponerlo dentro de las etiquetas <script>.

[code language=”js”]

$("#button1").click(function(){
swal({
title:’Hola mundo!’,
text:"Hola, estamos probando Sweet Alert 2",
type:’success’
})

});

[/code]

En este ejemplo que que hacemos es llamar a la funcion swal en el evento click de un botón.

Tenemos 3 parámetros:

• title: Es el titulo de la alerta con texto en grande.
• text: Es un texto informativo mas pequeño
• type: Son los tipos de alerta, para cada tipo de alerta se muestra un icono con una animación, los tipos pueden ser: success, warning, error, info, question.

Ejemplo 2

Tenemos otro boton que llama a la funcion swal.

[code] <button id="button3" class="btn btn-danger">Opcion 3</button>[/code]

Y el javascript seria el siguiente:

[code language=”js”]

$("#button3").click(function(){
swal({
title:’Boton 3!’,
text:"Esta es la opcion 3",
type:’error’,
showConfirmButton: false,
timer: 1000,
position:’bottom-end’
})
});

[/code]

En este ejemplo tenemos 3 nuevos parámetros:

• showConfirmButton: sirve para mostrar o no mostrar el boton “Ok” para cerrar la alerta/ventana.
• timer: es un numero en milisegundos que equivale a el tiempo que estara disponible una alerta, despues de este tiempo la alerta se cierra automaticamente, 1000milisegundos = 1segundo.
• position: Es la posición donde queremos que se muestre la alerta, si no se especifica ninguna entonces se muestra en el centro, pero estan las opciones: top-start, top-end, bottom-start, bottom-end.

Resultado

Descarga

Les dejo un link para que descarguen el ejemplo que utilice con todos los archivos.

Link: https://drive.google.com/file/d/12qGapHQwTfqOr-PQvqTQbij-aVkifwHs/view?usp=sharing

No se olviden de compartir.