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.
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.