Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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:

boreAlert

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:
swal1
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:

swal2
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!
swal3
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:
swal5

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:
swal4

Another interesting option is the alternative to confirm(“Are you sure!”) with an OK and cancel button. Here is an example 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");
            }
        });

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

  swal({
        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:

SWAL

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
javascript ,alert ,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.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}