Sweet Alert for Bootstrap – Blends nicely with any Bootstrap based project
lipis.github.io
lipis.github.io
But given that window.alert has (apparently) two functions:
- Display a message to a user
- Block javascipt execution until a button is pressed
This is a great replacement for those who are using it for #1, which in my experience, is probably >99% of its usage in the wild. If you're using window.alert to, say, synchronize the beginning of an event with a user click this probably will work just fine too. If you need the world to stop until a button is pressed, I'd sooner guess that your application is written poorly.
Its presented as a replacement for alert so pointing out that it's not a drop-in replacement seems relevant to me at least. Even if most alert usages can easily be replaced by this (somewhat dubious depending on your definition of "easily"), additional work will still need to be done for many (most?) of them.
Also being able to add a "blocking" call in JavaScript would be a _big deal_, so noting that this does not do so seems like something worth mentioning.
He explained how we process and prioritize visual cues -- how, if an element expands equally to the left AND right of our field of vision, it gets highest priority because it resembles an object heading toward our face.
For that reason, he avoided this design for everything except the highest-priority events.
Not crapping on your library -- it looks really nice :) But in general, I think it's worth considering if it's necessary to demand users' attention all over the place. I think information overload isn't solely in the content we consume but how it's presented.
There are legitamite suggestions that blocking UI paradigms are bad, but they're very useful at times. I'm not arguing either, as I think each has their place (although I tend to avoid blocking personally if I can)
My real question is why now?
The homepage doesn't tell me if I can customize the animation.
As another commenter said, I do wish that clicking outside of it had the same effect, but that may have more to do with what sites typically abuse these kinds of boxes for ("Alert! Sign up to our..." (no go away)).
One issue I noticed: there's a race condition in the second-to-last example ('...and by passing a parameter, you can execute something else for "Cancel".'), where if you hit escape quickly enough as the box gets launched, the cancellation handler does not run.
allowOutsideClick - If set to true, the user can dismiss the modal by clicking outside it.
There seem to be very sparse examples of how to deploy the library properly, only to implement it.
Visually great. Cool how there's the ability to catch responses and work in the same modal further.
Edit: firefox 24.8.0
Deleted comment
swal({
title: "Click outside to close",
allowOutsideClick: true
})Am i wrong or is a replacement not something which replace the original function? (beside the blocking aspect of an alert). Looks beautiful anyway :)
This is just a clone for Bootstrap of the original SweetAlert.I have a Bootstrap CSS + React app that uses React for everything I'd need Bootstrap JS for. The cost of Bootstrap JS is 9.9kb + 32.5kb (jQuery) = 42.4kb. Meanwhile, SweetAlerts JS weighs 3kb gzipped and comes with a simple API for exactly what I want to do.