Bored with Alert? Check out SWeet ALert (SWAL)

DZone 's Guide to

Bored with Alert? Check out SWeet ALert (SWAL)

A different way to alert users to errors in JavaScript using an open source GitHub project called SWAL.

· Web Dev Zone ·
Free Resource

We take our time and effort designing a beautiful website, but still sometimes resort to using JavaScript’s old alert pop-up, or any modal or window pop-up:


Now, this dated dialog box approach can be avoided using the SWeet ALert (SWAL) beautiful plug-in created by Tristan Edwards. Edward's contribution provides a dynamic and good-looking interface which functions the same as the standard alert dialog box.

Below, is a quick example of SWAL:
The old alert (shown above) is probably imprinted into the mind of developer's familliar with the standard dialog box options in JavaScript.  The improvement in using SWAL looks professional and can be styled to compliment websites using the library.

The syntax is just as simple as the JavaScript alert:

swal("Welcome to SWAL");

More Facts and Secrets of SWAL

SWAL allows many interesting options.  Explanation or text can be included with the alert message:

Here is the simple example (please excuse the typo):

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

We can add icons to update user with more information and in a more interactive manner!
This is a success message, with options for success, update, and delete.  The code goes like below:

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

There are cases where we may need to display an error. The above code can be updated with just a minor change would display a error icon with animation as well.  The code looks like:

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

The alert appears as follows:

In the case of a warning message, SWAL provides a warning icon.  The code looks like:

swal("Welcome to SWAL","Oh No!!","warning");

The alert looks like below:

Another interesting option is the alternative to confirm(“Are you sure!”) with an OK and cancel button. Here is an example using 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) {
             swal("Deleted!", "Your file has been deleted.", "success");

We can also format the text in HTML format, display any image or any other sort of html manipulation inside the alert pop-up:

        title: "HTML <small>Welcome to SWAL</small>!", 
        text: "A html format <span style='color:#F8BB86'>html<span> message.",
        html: true

This is only a primer on what is possible with SWAL, please review the detailed documentation in the below link for additional options:


Download SWAL

SWAL requires only CSS and Javascript files to be added to your layout. Below is the direct download link to get the files:

Download SWAL Zip

alert, javascript, web design

Published at DZone with permission of Suraj Sahoo , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}