Las alertas en JavaScript son un componente importante en el diseño web. Se utilizan comúnmente para notificar a los usuarios. La biblioteca SweetAlert2 tiene como objetivo hacer que las alertas de aspecto básico sean mucho más atractivas y también proporcionar contexto a la alerta. La documentación y los ejemplos de uso de SweetAlert2 se pueden encontrar aquí.
Instalación: la biblioteca SweetAlert2 se puede incluir utilizando el siguiente enlace CDN:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Sweet Alert2</title> <!-- Include the library --> <script src= "https://cdn.jsdelivr.net/npm/sweetalert2@9"> </script> </head> <body> <h1> Sweet Alert2 HTML Page </h1> <script type="text/javascript"> // Make a simple alert // with the given text Swal.fire( 'Hey!', 'Welcome to GeeksForGeeks', 'success' ); </script> </body> </html>
Producción:
Ejemplo 2: Este ejemplo muestra el uso de esta biblioteca para un botón Me gusta.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert3</title>
<!-- Include the library -->
<script src=
"https://cdn.jsdelivr.net/npm/sweetalert2@9">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>
Sweet Alert3 HTML Page
</h1>
<script type="text/javascript">
// Show a more complex alert with
// the given text and properties
Swal.fire({
// Specify the title
// of the alert
title:
'<strong>Hit the Like Button at GeeksForGeeks</strong>',
html: '',
// Show a close button
showCloseButton: true,
focusConfirm: false,
// Specify the text
// for the button
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel:
'Thumbs up, great!',
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por IshjotSingh97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA