This is a nice implementation of an alert, but ideally you shouldn't ever need it. Alerts are a pretty horrible feature in a user's experience. Essentially they say "STOP WHAT YOU ARE DOING. THIS IS MORE IMPORTANT."<p>If something is that important then you'll usually want to give the user a choice from a set of options - e.g. if the user is doing something that can destroy data without the possibility of undoing their actions then you'll want a dialogue that asks them if they're sure. That should block all other interaction because it really <i>is</i> important. When the user has no input though, and there's nothing they can do but click 'ok', there's no need to use an alert. Just put a message on the screen that's high enough up the page's information hierarchy that they've very likely to see it. Make it sticky (so it's there until the user dismisses it, but doesn't block other actions) if it's something that they need to confirm that they've seen.<p>Don't force the user to do things your way. Guide the user, sure, but let them do things their way.
This strikes me as cartoonish rather than beautiful. The animated green line art is semantically confusing, suggesting some sort of continuous process rather than a static situation. I suppose that could be good if you feel people tend to hit OK too fast without reading the text.
Like other people here have pointed out, this isn't exactly an alert replacement as much as it is a more limited form of modal dialog. And honestly if that's what you need, there's better solutions out there, even in the form of the HTML dialog element (whenever that comes into mainstream support at least).
- Doesn't work on older browsers.<p>- Unexpected behavior on mobile devices. (since they usually implement their own alerts)<p>Just make it backwards-compatible and it will be pretty sweet. Until then it's not serious.
Please do not use this until the authors ensure people using the keyboard alone / screen readers can dismiss the dialog and access elements contained within.
Though the alert may look nice, the actual JS behind it is hugely wanting for several reasons:
- 690 LOC to produce an alert dialog<p>- Heavy use of Javascript for what CSS is designed for: <a href="https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L258-L303" rel="nofollow">https://github.com/t4t5/sweetalert/blob/master/lib/sweet-ale...</a><p>- Inconsistent between function spacing followed by mixed tabs and spaces<p>- Odd use of DOM based attributes to pass configuration options<p>- Colourspace manipulation on each call where SASS would be effective
<a href="https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L566" rel="nofollow">https://github.com/t4t5/sweetalert/blob/master/lib/sweet-ale...</a><p>- Includes jquery, but uses it very little, instead opting to re-invent the wheel in most cases.<p>- Strange click event firing, gratuitous use of magic key code numbers <a href="https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L391" rel="nofollow">https://github.com/t4t5/sweetalert/blob/master/lib/sweet-ale...</a><p>etc...
Honestly the native version looks better to me. And it has the desired functionality of blocking the UI thread... I don't think you should encourage anyone to use alerts by making them prettier.
Is the OP the author?<p>If so, there's a slight typo on the "See it in action!" page (<a href="http://tristanedwards.me/sweetalert" rel="nofollow">http://tristanedwards.me/sweetalert</a>). For the "A warning message, with a function attached to the "Confirm"-button" demo, the code displayed says 'alert("Booyah!");' but the alert being displayed says 'Deleted!'
Something I find annoying with this is that on mobile (haven't tried other platforms) it goes back to the top of the page when a sweetalert opens.
What is 'beautiful' about it? There's absolutely nothing beautiful about it at all. I don't think the OP realizes what "beautiful" means.<p>I recommend using the content in the link itself: it's described as 'awesome' not 'beautiful'.<p>What's funny is that since this doesn't actually <i>work</i> like a JS Alert, it's actually quite 'ugly'. ;)
Looks great, but it seems like positioning it as a beautiful flash message plugin rather than an alert replacement might be more apt.<p>Hopefully very few JS developers are using alerts in their production code (or dev for that matter!), and if they are they're probably not interested enough in user-friendly design to seek out this replacement.
You should be able to click off of the modal and it should disappear.<p>The only issue I see with doing it that way is if you are in another Window and click to get focus, but you should deal with the alert when it appears since it is a part of completing a task.<p>Usually people only switch windows when they have completed a task.
Most comments critique the widget, but I'd like to talk about the demo website. It's really well done, I wish more products (especially free and open source) were on top of their game when it comes to presentation, samples and configuration. Good job!
There's a bug in your example page:<p>Click the Confirm example: Click "cancel" to clear the dialogue.<p>Click the button again: Click "delete me" and you don't get the deleted alert that you normally get.
What about the alert type which contains a text box?
something like: <a href="http://www.pastemehere.com/34pvxrtc" rel="nofollow">http://www.pastemehere.com/34pvxrtc</a>
Animation should augment UI, not steal attention away from what the user should focus on. In case of popup alerts, popup animation itself does what is needed.
Where's prompt?<p>Also, I suggest optionally only blocking a portion of the DOM and centering over it. This would allow a component to lock without locking the application.
I use blockui for this kind of thing:<p><a href="http://malsup.com/jquery/block/" rel="nofollow">http://malsup.com/jquery/block/</a>
It looks great, but funny that it shows a normal Javascript alert when clicking the confirm button in the example.<p>But needs more callback functions...
been using this: <a href="https://github.com/fabien-d/alertify.js/pull/173" rel="nofollow">https://github.com/fabien-d/alertify.js/pull/173</a>, which can replace alert, prompt and confirm
Does this guarantee that the alert will be on top of the html elements on the current page? Sometimes this is important if you are building a browser plugin and need to show dialog to the user. For example, I use alert instead of a modal html dialog because when you are injecting it on some pages it won't show up properly.<p>Chrome supports the <dialog> element which is guaranteed to appear on top of whatever page its injected on.<p>Javsacript's Alert, prompt, also guarantee it will appear on top.