Overview Of SWEET ALERT

Introduction

 

A simple and effective article that might come handy while developing web applications.

 

 

 

Oh not again! We add efforts designing a beautiful website but still sometimes use the JavaScript's old alert pop up or any modal or window pop up. But that can be now avoided by this beautiful plugin. This is a free dynamic and easy to use and manipulate. It is a SWEET ALERT created by Tristan Edwards.

 

This provides a great dynamic and good-looking interface and acts the same as the alert pop up. Let us have a look at the difference once. The old alert is shown above and rather should be an imprint in any developer's mind. Now below is the alert by Sweet Alert, which is truly sweet. Doesn't this look professional and goes with the websites being designed now?

 

 

Wondering about the syntax. It is simple and the same as the JavaScript alert.

swal("Welcome to SWAL");

Now let us get into the other secrets of SWAL and `beautify!

 

More facts and Secrets of SWAL

 

We can do a lot many interesting things using this simple tool. Let's check out.

 

 

We can add an explanation or text under the alert message, unlike in JS alert, whatever we add comes as a single statement. Let's see how! The code again for this goes as simple as:

swal("Welcome to SWAL","Is'nt this pretty!!");

We can add icons to update user with more information and in a more interactive manner. Let's check how! This is a success message like we can have supposed success message alert for Addition of Detail is Success or Update or Delete is a success.

 

 

The code goes like the following:

swal("Welcome to SWAL","Is'nt this pretty!!","success");

This comes with an animated success icon. Once you try, you will get the feel.

 

There are cases we may get some server error. We may track the error on Ajax and display some alert to the end-user regarding that. The above code with just a minor change would display an error icon with animation as well.

 

 

The code looks like:

swal("Welcome to SWAL","Oh no!!","error");

The alert looks like the following:

 

 

There are cases we may get some validation error from users or some kind of confirmation from the user if he/she wants to continue. In that case, swal provides a warning icon.

 

The code looks like the following:

swal("Welcome to SWAL","Are you sure!!","warning");

The alert looks like the following:

 

Another interesting option is the alternative to confirm("Are you sure!") with a Ok and cancel button and on Ok do what !! Lets have a hand to it using SWAL:

swal({
        title: "Are you sure?",
        text: "You are deleting this completely!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    },
    function(isConfirm)
     {
        if (isConfirm)
        {
            swal("Deleted!", "Your file has been deleted.", "success");
        }
    });

The above snippet is only a confirmation and if confirmed then what to do. Here a success alert is displayed that file is deleted. We can also format the text in HTML format, display any image or any other sort of html manipulation inside the alert pop up. Check below:

swal(
{
    title: "HTML Welcome to SWAL!",
    text: "A html format html message.",
    html: true
});

There are a lot of more stuffs which we can do and enjoy. Please check the detailed explanation in the following link: SWAL.

 

Downloads

 

SWAL required only a CSS and JavaScript file to be added to your layout and done. The following is the direct download link to get the files,

 

Download SWAL Zip

 

Conclusion

 

I hope this simple article comes handy for many in the future and helps developers give a wonderful look and feel and make their clients happy.