The “SweetAlert” library, often referred to as “swal,” to create a custom and interactive alert modal with customized buttons, text, and icons. The modal is typically used for user confirmation or information display in a more visually appealing way than the browser’s default alert.
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});

.then((willDelete) => { ... }): This is a callback that is executed when the user interacts with the modal and clicks one of the buttons. The parameter willDelete holds the user’s choice (true or false).
Inside the .then() callback:
- If
willDeleteis true (user clicked the confirmation button), anotherswal()call is used to display a success message with an icon. - If
willDeleteis false (user clicked the cancel button), a differentswal()call is used to display a message indicating the file is safe.
The code creates a custom alert modal using the “SweetAlert” library. It asks the user for confirmation to delete an imaginary file. Depending on the user’s choice, it displays a success message or a message indicating that the file is safe. The library is used to enhance the user experience and provide a more visually appealing way to display alerts.