JavaScript is embedded in all browsers. It provides 3 dialog boxes – alert, confirm, and prompt. Each browser has its own look and feel. The dialog boxes also look different on each browser. You may find these dialog boxes odd on browsers.

While building the web application our primary focus is on user experience. And somehow, JavaScript’s built-in dialog boxes are not providing a decent user experience. Every browser displays these boxes differently which breaks the visual consistency.

In this article, we discuss the SweetAlert library which is a beautiful replacement for JavaScript dialog boxes. Using SweetAlert, you’ll have complete control over the design of your dialog boxes. You can build a dialog box as per the nature of the operation – whether it’s for a successful operation, for showing a warning or error message, if it’s for Ajax handling in a popup, etc.

SweetAlert Dialog Boxes

SweetAlert gives you full control over the text and buttons of the dialog boxes. We can even change the text for the heading and button of the popup box.

Below are some examples of SweetAlert dialog boxes.

Alert Dialog Box

Confirm Dialog Box

Prompt Dialog Box

How to Use SweetAlert

Integrating SweetAlert into the website is straightforward. It requires you to include their JS file and you are ready to use the methods of the SweetAlert library.

Let’s take a look at 3 dialog boxes one by one.

Alert Box Example

<script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
swal("Hello world!");
</script>

Here, I have included the CDN path of the SweetAlert library using the script tag. To add SweetAlert’s boxes, you have to use the swal() function. The above code will give you an alert popup with the text ‘Hello world!’.

You can also set the modal title along with the text as follows:

swal("Here's the title!", "...and here's the text!");

If you wish to show a popup on the basis of the nature of the operation, use the third argument. The values for the third parameter can be “success”, “warning”, “error”, and “info”.

swal("Good job!", "You clicked the button!", "success"); //success, warning, error, info

Try all values of the third argument and you will get a different UI for your alert box.

Confirm Box Example

The Confirm box is used to get consent from the user before proceeding to the next operation. One can add SweetAlert’s confirm box with the code below.

swal({
    title: "Are you sure?",
    text: "Once deleted, you will not be able to recover this record!",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})
.then((willDelete) => {
    if (willDelete) {
        swal("Poof! Your record has been deleted!", {
            icon: "success",
        });
    } else {
        swal("Your imaginary file is safe!");
    }
});

Sometimes, you need to send AJAX requests with the Confirm dialog box. With SweetAlert, you can send an AJAX request after the user confirms it and handle the response as follows.

swal({
    title: "Are you sure?",
    text: "Once deleted, you will not be able to recover this record!",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})
.then((willDelete) => {
    if (willDelete) {
        jQuery.get('ajax.php', function(response) {
            if(response == "true") {
                swal("Poof! Your record has been deleted!", {
                    icon: "success",
                });
            }
        });
    } else {
        swal("Your imaginary file is safe!");
    }
});

To see it in action, you have to return the “true” value from the ajax.php file.

Prompt Box Example

A prompt dialog box is rarely used on the website. However, if someone wants to use it with SwetAlert then use the code below.

swal("Write something here:", {
    content: "input",
})
.then((value) => {
    swal(`You typed: ${value}`);
});

These are a few examples of using the SweetAlert library. You can explore more on the SweetAlert documentation. Give it a try and share your thoughts in the comment section below.

Related Articles

• Deploy Static Website on Firebase Hosting for Free
• Validate Google reCAPTCHA using JavaScript
• HTML Form Validation using Parsley

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.