SweetAlert – A Beautiful Replacement For JavaScript Dialog Boxes

JavaScript is embedded in all browsers. And thus JavaScript dialog boxes (alert, confirm, prompt) are also embedded in the 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 default dialog boxes are not providing a good user experience.

In this article, we discuss about the SweetAlert which a beautiful replacement for JavaScript dialog boxes.

SweetAlert Dialog Boxes

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

Below are some examples how SweetAlert dialog boxes.

Alert Dialog Box

Confirm Dialog Box

Prompt Dialog Box

How To Use SweetAlert

Using SweetAlert in our application is a straight-forward process. First, we need to include SweetAlert JS file and then we can use their methods available.

Alert Box Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    jQuery(function() {
        swal("Hello world!");
    });
</script>

While using SweetAlert, we need to use swal function to call our dialog boxes. Above code will alert the box with 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 alert box on the basis of 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

Confirm Box Example

To use the SweetAlert confirm box, we can 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 request with the confirm dialog box. In that case, we process to AJAX request after clicking the confirm button.

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) {
        $.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 wishes to show it by SwetAlert then below is the code for the prompt box.

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

It’s all about SweetAlert library. You can explore more about SweetAlert from their documentation.

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

Recommended Tutorials For You

Leave a Reply

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