From time to time, you may actually need an alert-like user experience. When you do, SweetAlert beats the built-in JavaScript alert function hands down.
I think most would admit that the alert was one of your first “JavaScript moments.” Or at least, it is how you debugged your very first JavaScript project. If you are a member of neither group, then you get to pick from the treasure chest on the way out. Regardless, the alert function is one that, from time to time, may be what you want… at least in spirit. More likely, you will want to use the built-in confirm functionality to act upon a “yes / no” user response. If you find yourself actually considering using or imitating the alert or confirm functions, consider SweetAlert from Tristan Edwards.
SweetAlert isn’t a jQuery plugin. Instead, it is a combination of one JavaScript file, some CSS and a handful of images. Together, they produce an alert / confirm UX that is highly-configurable and pretty serious eye-candy. Implementation is super-simple, using the global “swal” method.
Examples
A fancy JavaScript alert
|
1 |
swal("Here's a message!"); |
A JavaScript alert with a custom icon
|
1 2 3 4 5 |
swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "images/thumbs-up.jpg" }); |
You can definitely do better than alert-like messages though. When you wander into confirm territory, you can customize the yes/no experience, and even provide a callback to inform that user that something they agreed to do completed successfully. I won’t try to replicate the SweetAlert examples here because Tristan Edwards already does an excellent job of that. My only message here is: If you need a better JavaScript alert/confirm experience, consider SweetAlert!
The SweetAlert Home Page: http://tristanedwards.me/sweetalert
SweetAlert on GitHub: https://github.com/t4t5/sweetalert
[…] good friend, Kevin Chisholm, writes about SweetAlert, an better user notification window. Way better, and being just plain mark-up, you can even […]