Creating Nice Alerts with sweetAlert

JavaScript
1

Originally published at: http://www.sitepoint.com/creating-nice-alerts-sweetalert/

When building JavaScript-driven websites we often have the need to provide feedback to our users to let them know if the action they have performed has been successful or not. In the early days of the web, developers used to create messages using the window.alert() function. While alert() works in practice and it’s also consistent across browsers, it’s not very flexible and, to be honest, its look and feel is terrible. Today there are several approaches adopted that range from modals to inline messages. In this article I’ll introduce you to sweetAlert, a library that acts as a replacement for the JavaScript’s alert() function.

What is sweetAlert?

As mentioned in the introduction sweetAlert is a replacement for JavaScript’s window.alert() function that shows very pretty modal windows. It’s a standalone library that has no dependencies, and it’s made from a JavaScript file plus a CSS file.

This library comes in three different flavors. The first is a library that you can use in any web project, the second is a fork that is specifically adapted to work with Bootstrap, and the third is a fork that you can use in your Android projects. This project is constantly under work as you can see from the fact that the last version was released just few days ago.

Now that you know what this library is all about, let’s see how you can use it in your website.

Read more on SitePoint.

2

For a Developer like me that suck with front-end stuff, this will come in handy.

Page bookmarked as I will be needing something like this for a project.

3

It looks nice. What about comparing it vs bootbox?? It seems bootbox is more complete project (and older of course)…

4

Looks great - although I am experiencing an issue when using in IE10 (Browser Mode IE10) where the alerts close immediately they are opened, excepting the timer. If I change to IE9 compatibility, it all works correctly again.
No problems at all in Chrome (latest), and I am unable to test with FireFox. Hope this helps.

5

Same issue with IE11 too, so not ready for production use yet.

6

Hi. It’s possible that you’re encountering this issue that has been fixed.

7

That appears to have fixed an issue with the timer but the main functionality doesn’t work in IE11 (or IE10 from what others mention).

8

Thanks for IE fix. This looks great, I look forward to using it in the near future :slight_smile:

9

The SweetAlert repo seems to be inactive. There’s a bunch of Pull Requests without any replies, last merged pull request was on Nov 9, 2014.

I created sweetalert2 with HTML support in modal and some other options for customisation modal window - witdh, padding, etc.

10

Hello,
thank you, very good script.
You also need to add functions php on the server without opening a new window.
For example:

swal({
            title: 'Are you sure?',
            text: 'You will not be able to recover this imaginary file!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel plx!',
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function(isConfirm) {
            if (isConfirm) {
              swal(
                'Deleted!',
                'Your file has been deleted.',
                'success'
              );
                window.location = 'delete_files_server.php'; 
            } else {
              swal(
                'Cancelled',
                'Your imaginary file is safe :)',
                'error'
              );
            }
        });
11

i wondering if i can echo out sweet alert script?
this is my code
echo “< script> swal(“heres a message”)< /script>”;

12

It will work - but only if you change the quotes so the echo and the message are not conflicting.

13

Hello,

how to link after clicking OK?

swal({'text','text','success'},
function(){document.location.href = 'http://...'});
14

Hi AurelioDeRosa,

Help me make cookies after you click to close for 24 hours.

This works on alert confirm.

if (getCookie("user_canceled") != "YES") {
    if (confirm("Selection")) {
        window.location.href = "http://..."   
    } else {
        setCookie("user_canceled", "YES", 10);
    }
}

function setCookie (name, value, days) {
// code
}

function getCookie(name) {
// code
}

How to do for sweetAlert?

15

Users! Forum CLOSED sweetAlert

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.