How to add sweetalert2 plugin into your web application

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/[email protected]/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.

Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

Or

No Comment