Introduction
A simple and effective article which might come in handy while developing web applications.
Oh not Again!!
We add efforts in 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 free dynamic and easy to use and manipulate. It is SWEET ALERT created by Tristan Edwards. This provides great dynamic and good-looking interface and acts the same as the alert pop up.
Let's 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 truely sweet.
Doesn't this look professional and go 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's 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 explanation or text under the alert message, unlike in JS alert, whatever we add comes as single statement. Let's see how!
The code again for this goes 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 suppose success message alert for Addition of Detail is success, or Update or Delete is success.
The code goes like below:
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 in which 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 below:
There are cases we may get some validation error from users or some kind of confirmation from user if he/she wants to continue. In that case, swal provides warning icon.
The code looks like:
swal("Welcome to SWAL","Are you sure!!","warning");
The alert looks like below:
Another interesting option is the alternative to confirm(“Are you sure!”) with a Ok and cancel button and on Ok do what !! Let's 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 <small>Welcome to SWAL</small>!",
text: "A html format <span style='color:#F8BB86'>html<span> message.",
html: true
});
There is a lot of more stuff which we can do and enjoy. Please check the detailed explanation in the below link:
Downloads
SWAL required only a CSS and JavaScript files to be added to your layout and done! Here is the direct download link to get the files.
Conclusion
I hope this simple article comes in handy for many in the future and helps developers give a wonderful look and feel and make their clients happy.
