SweetAlert – A Beautiful Replacement for JavaScript Dialog Boxes

JavaScript is embedded in all browsers. JavaScript provides dialog boxes (alert, confirm, prompt) which are available in all major browsers. Each browser shows these dialog boxes differently in terms of UI.

While building an application our primary focus is on user experience. And somewhere, JavaScript’s dialog boxes are not providing a good user experience. This is because on each browser these boxes have different UI which somehow breaks the consistency of look and feel.

In this article, we discuss the SweetAlert which is a beautiful replacement for JavaScript dialog boxes. Apart from these basic alerts, SweetAlert provides much more like success|error messages, warning models, Ajax handling in popups, etc.

SweetAlert Dialog Boxes

While using SweetAlert we will have full control over the text and buttons of the dialog boxes. We can change the heading text, button text as per our convenience.

Below are some examples of SweetAlert dialog boxes.

Alert Dialog Box

Confirm Dialog Box

Prompt Dialog Box

How to Use SweetAlert

Using SweetAlert in the application is a straightforward process. It requires us to include their JS file and we are good to use the methods of SweetAlert library.

Alert Box Example

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

While using SweetAlert, you have to use the swal function to call the different types of dialog boxes. The above code will give a popup with the text ‘Hello world!’.

We can also set the modal title and then text as follows;

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

If you want to show a popup on the basis of the nature of the operation, then pass the third argument. Third argument can be “success”, “warning”, “error”, “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 on each of them.

Confirm Box Example

In order to use the SweetAlert confirm box, use 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, we need to send AJAX requests with the confirm dialog box. In that case, we send an AJAX request after clicking the confirm button and then 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!");
    }
});

Prompt Box Example

A prompt dialog box is very 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 basics about SweetAlert library. You can explore more on the SweetAlert documentation.

Related Articles

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

Leave a Reply

Your email address will not be published. Required fields are marked *