Thursday, 12 October, 2017 UTC


Summary

JavaScript alert pop-ups are loathed by pretty much everyone. They force your attention and overtake the browser, so you need to close them before you can interact with the page.
In the modern era, we can do better than JavaScript alert boxes. SweetAlert2 is probably the best solution.
Read Also: 10 Android Apps for Smarter Notifications
It’s a JavaScript-powered pop-up script that’s designed to be fully responsive and support accessibility for all users.
Naturally, it’s also open sourced and freely available on GitHub if you wanna dig into the code.
But, the real treasure is the demo on the main SweetAlert web page. It offers a direct comparison between the original JavaScript alert box and the SweetAlert2 message.
What’s funny is the code snippets don’t seem like much of a difference. You can run SweetAlert2 with one line of code just like a typical JavaScript alert, although that line may be longer by comparison.
With SweetAlert, you have more control over the popup box style, the animation, the button colors, and the text styles. You can even embed images or videos into the alert box.
However, the absolute best feature is that SweetAlert2 does not overtake the entire browser. If you run a SweetAlert2 pop-up it’ll only display on that one tab, so even if the user is browsing another site they won’t be forcefully directed to your tab just because an alert popped up.
This ultimately increases user engagement because people aren’t warded away due to shady UX practices.
You can set auto-close timers, confirm/reject buttons, and even customize the animation using third-party libraries such as Animate.css.
If there’s any script you should use in lieu of the typical JavaScript alert it’s gotta be SweetAlert2. This thing is totally free, open-source, and offers a bunch of custom options that’ll have every web developer grinning from ear to ear.
Check out the main website to learn more and see some live examples. You can also browse the GitHub repo if you want to see the files and check out release logs.
Read Also: Overhang.js – A jQuery Plugin for Dropdown Notification Messages