Sweetalert2 is opensource simple and standalone javascript plugin which provides responsive and beautiful popup modal boxes. With the help of sweetalert2, you can improve your web applcation UI. Sweetalert2 is written in pure Javascript, so you don't need to add any dependencies to use Sweetalert2 plugin.
You can use sweetalert2 to display success or error message or if you need user confirmation. In this article, we will discuss how to use sweetalert2 plugin in web application.
Installation
First download plugin from Github.
And initialise by adding below tags in <head> section.
<script src="sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">
Or you can simply add files from CDN providers.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.js"></script>
Basic usage
Now use Swal.fire() method to launch sweetalert2 box.
Swal.fire('Welcome to the Hello World!');
Bind with button
You can also popup message on event like click or response to Ajax response.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.js"></script>
</head>
<body>
<div class="container mt-3 text-center">
<button type="button" class="btn btn-info" onclick="showMessage()">Show Message!</button>
</div>
<script type="text/javascript">
function showMessage() {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href="">Why do I have this issue?</a>'
});
}
</script>
</body>
</html>
Sweetalert provides variety of options to pass as object to configure.
| Option | Description |
|---|---|
| title | The title of the popup box. |
| titleText | The title of the popup, as text. |
| html | A HTML code of description for the popup box. |
| text | A description for the popup. |
| icon | The icon of the popup. SweetAlert2 provides animated icons for: warning, error, success, info, and question |
| iconColor | Use this to change the color of the icon. |
| footer | The footer of the popup box. |
| backdrop | Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop. |
| input | Input field like text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url. |
| width | Popup window width, including paddings. |
| padding | Popup padding. |
| background | Popup window background. |
| Popup window background | Popup window position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'. |
| timer | Auto close timer of the popup. Set in milliseconds. |
| width | Popup window width, including paddings. |
| padding | Popup padding. |
| showConfirmButton | If set to false, a "Confirm"-button will not be shown. |
| showDenyButton | If set to true, a "Deny"-button will be shown. |
| showCancelButton | If set to true, a "Cancel"-button will be shown which will dismiss the modal. |
Sweetalert2 also provides handling button.
| Option | Description |
|---|---|
| isConfirmed | The "Confirm" button was clicked, the value will contain the result. |
| isDenied | The "Deny" button was clicked. |
| isDismissed | The "Cancel" button was clicked. |
| value | The value from the popup, possible values: true for simple confirmed false for denied popups |
| dismiss | The dismissal reason. |
You can also change sweetalert2 theme also. For more configurations and details, check the official website.
