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’
})
});
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.
Necesita la libreria de jquery?
Si amigo