53 ms·
A replacement for JavaScript's “alert”
- ssfdsafd 12y agosdfasdfasfd
- ssfdsafd 12y agoasfdasfdasfd
- protonfish 12y agoNice, but I have found the native implementations don't look as bad as they used to, especially on mobile web.
- anton-107 12y agoThere is one gotcha with native/custom alert messages like these: native alerts block the ui thread of a browser, while custom do not. Sometimes you want to block and sometimes you don't. When you don't - you need something nice and simple.
- protonfish 12y agoI think if you don't want block the UI thread you shouldn't be using alerts. That is the whole point of it.
- jrs235 12y agoIs the OP the author? If so, there's a slight typo on the "See it in action!" page (http://tristanedwards.me/sweetalert http://tristanedwards.me/sweetalert). 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!'
- colinramsay 12y agoNo (check the OP's HN profile), but would it matter either way? edit: Ah, fair enough. The project's github page has issues enabled though.
- hcho 12y agoNot a replacement really; doesn't mimic the function signature, is not blocking as the alert etc etc
- colinramsay 12y agoIt's not possible for JS code to replicate the native blocking of alert(), prompt() and the like. Plus, if you call this with just one parameter, it does still work: sweetAlert('hello')
- kurumin 12y agoYes, is possible! https://github.com/al0p/wow-alert https://github.com/al0p/wow-alert
- Kiro 12y agoIs it blocking?
- reaktivo 12y agoFrom reading the source code I can say that no, it's not blocking. Although I'm not sure if there is an actual way of achieving that.
- Stratoscope 12y agoThere is no way for JavaScript code to implement the blocking behavior of alert().
- deleted 12y ago[deleted]
- scottcanoni 12y agoWhat I like about Wow Alert: 1. It's less than 5KB. 2. It overrides the existing alert function. 3. It extends the existing alert function. What I don't like about Sweet Alert: 1. It's bloated for what it does... > 30KB 2. The short-hand swal doesn't make sense or read well.
- mmorris 12y agoLooks great, but it seems like positioning it as a beautiful flash message plugin rather than an alert replacement might be more apt. 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.
- adregan 12y agoThis could be an interesting discussion. I notice that even large apps like gmail and google calendar use native alerts (and I've been using them a bit more under certain circumstances—something has gone terribly wrong). What about native alerts in all situations equals unfriendly design—esp. when trying to mimic mobile native apps, but needing to span the gap from OS to OS?
- mmorris 12y agoI agree with their use under very particular circumstances, like in your example or (at least in desktop Chrome) for bringing attention to a window that isn't visible. I was referring more to using alerts as they're being used in the SweetAlerts examples (success messages and other "flash messages"). In these cases, UI-thread blocking seems bad, no? I actually think SweetAlerts looks pretty nice for those kind of in-app notifications, which was the point I was trying to make. (Though seeing comments from people who have dug in further it seems like it has some issues)
- JonRB 12y agoSomething 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.
- kurumin 12y agohttps://github.com/al0p/wow-alert https://github.com/al0p/wow-alert
- chandrew 12y agoLinked demo would be nice :P
- onion2k 12y agoThis 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." 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 is 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. Don't force the user to do things your way. Guide the user, sure, but let them do things their way.
- jfaat 12y agoTrue but you can also use it with ok/cancel options, which I think fits the use case you mentioned when you said: > 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
- jcampbell1 12y agoAs far as I can tell, there are no callbacks. With javascript's confirm, you can do: if(confirm(....)) { doStuff() } else { cleanup() } This should at least have a callbacks for the different buttons. In terms of design, I don't like absolute vertical centering. It should be higher on the page. I use 1:2, or 1:1.6 for the top/bottom margin as my "default" modal centering.
- jfaat 12y agoOh wow, I just assumed those were tied to callbacks instead of just being a showCancelButton arg. The more I look into it the more underwhelmed I become.
- sandeep45 12y agolooks nice and friendly use. i look forward to using it. But when it comes to replacement, its not blocking. So its not a replacement.
- Fargillsta 12y agoWhat is 'beautiful' about it? There's absolutely nothing beautiful about it at all. I don't think the OP realizes what "beautiful" means. I recommend using the content in the link itself: it's described as 'awesome' not 'beautiful'. What's funny is that since this doesn't actually work like a JS Alert, it's actually quite 'ugly'. ;)
- deluvas 12y agoAs a non-native English speaker, it feels weird seeing phrases like this. In my opinion, a more appropriate word would be 'elegant'.
- moberemk 12y agoLike 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).
- romanovcode 12y ago- Doesn't work on older browsers. - Unexpected behavior on mobile devices. (since they usually implement their own alerts) Just make it backwards-compatible and it will be pretty sweet. Until then it's not serious.
- akerbeltz 12y agoFunny to see that when you click the "Yes, delete it!" button in the examples, a regular alert is displayed...
- nopar8 12y agoI thought the same thing! We'll be nice and give the author the benefit of the doubt and say it's juxtaposition :P
- cmstoken 12y agoAwesome work. But the contrast on the demo page is causing me health problems. It's a sad song unto my soul. Can you make it more readable?
- Thieum22 12y agoI use blockui for this kind of thing: http://malsup.com/jquery/block/ http://malsup.com/jquery/block/
- Siecje 12y agoYou should be able to click off of the modal and it should disappear. 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. Usually people only switch windows when they have completed a task.
- nyolfen 12y agowhat's with the recent surge in use of the word 'beautiful' to describe minimal UI elements
- discreteevent 12y agoI think it's just another case of language losing its meaning in certain contexts. In the case of front end web development it seems to mean 'flat with large well spaced fonts'. When terms are abused like this they quickly become terms of abuse. Give it another year and it will be an insult to call something beautiful because by that stage it will be clear that beautiful = early 2010s obsessively flat and minimal web design that everyone finds boring and pretentious now. (As you can probably tell, I do not like this style at all)
- discreteevent 12y agoThe thing that really annoys me about it is that the word 'beautiful' has meaning to me. That meaning is such that it only applies in very few places. By taking that word and associating it with something as mundane as a bloody message box (in this example - there are plenty of others); It feels like a con. The credit the word 'beautiful' has built up is being used to try to raise the calibre of something completely ordinary. It makes the word and the thing it is describing both seem cheap. There's a lot to be said for calling a spade a spade.
- saraid216 12y agoIt's marketing.
- oftenwrong 12y agoJust a bad trend.
- leeoniya 12y agobeen using this: https://github.com/fabien-d/alertify.js/pull/173 https://github.com/fabien-d/alertify.js/pull/173, which can replace alert, prompt and confirm
- deleted 12y ago[deleted]
- jafingi 12y agoIt looks great, but funny that it shows a normal Javascript alert when clicking the confirm button in the example. But needs more callback functions...
- deleted 12y ago[deleted]
- btown 12y agoHow does this have anything to do with the original post? Does OP use this technique in the library?
- deleted 12y ago[deleted]
- skeletonjelly 12y agoIt's in the demo https://camo.githubusercontent.com/3144fa643139adee4eb7d01e2e0a63c12d0e0a72/68747470733a2f2f7261772e6769746875622e636f6d2f743474352f7377656574616c6572742f6d61737465722f7377656574616c6572742e676966 https://camo.githubusercontent.com/3144fa643139adee4eb7d01e2...
- UUMMUU 12y agowhy does the checkbox line only go part of the way around the circle?
- ck2 12y agoa 20k replacement...
- eterm 12y agoThere's a bug in your example page: Click the Confirm example: Click "cancel" to clear the dialogue. Click the button again: Click "delete me" and you don't get the deleted alert that you normally get.
- amadeusw 12y agoMost 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!
- xiaq 12y agoIt's no coincidence that frontend developers make good websites :)
- nfoz 12y agoIn the year 2014, obnoxious popups are described as "beautiful" and "awesome".
- tbarbugli 12y agothis looks nice!
- prayerslayer 12y agoThen there's also smoke.js http://smoke-js.com/ http://smoke-js.com/
- m1117 12y agoThe only time I use alerts is for debugging purposes
- saraid216 12y agoon IE8 and below. Finished your sentence for you.
- oftenwrong 12y agoAnd finding XSS vulnerabilities in the wild.
- fiatjaf 12y agoThis is awesome, but it should close when the user clicks out of its bounds.
- orthecreedence 12y agoLike the alert box in browsers?
- anigbrowl 12y agoThis 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.
- jhdevos 12y agoIn fact, the animation draws attention away from the text, which you are probably supposed to read (otherwise, why bother with an alert). I really don't understand this infatuation with distracting unnecessary animations that people have nowadays...
- accessresource 12y agoPlease do not use this until the authors ensure people using the keyboard alone / screen readers can dismiss the dialog and access elements contained within.
- chc 12y agoAre you having some difficulty? It works for me with the keyboard.
- accessresource 12y agoApologies, it appears that keyboard handlers have been added since I last tested this a few days ago. https://github.com/t4t5/sweetalert/commit/2413e5cbcd1fe3d6e1f724716c4f972f803a2380 https://github.com/t4t5/sweetalert/commit/2413e5cbcd1fe3d6e1...
- curiously 12y agoDoes 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. Chrome supports the <dialog> element which is guaranteed to appear on top of whatever page its injected on. Javsacript's Alert, prompt, also guarantee it will appear on top.
- kevind23 12y agoHonestly 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.
- donpark 12y agoAnimation 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.
- cosmeen 12y agoSweet.
- 4684499 12y agoWith alert(), user can copy the content of alert with Ctrl + C.
- tshadwell 12y agoThough the alert may look nice, the actual JS behind it is hugely wanting for several reasons: - 690 LOC to produce an alert dialog - Heavy use of Javascript for what CSS is designed for: https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L258-L303 https://github.com/t4t5/sweetalert/blob/master/lib/sweet-ale... - Inconsistent between function spacing followed by mixed tabs and spaces - Odd use of DOM based attributes to pass configuration options - Colourspace manipulation on each call where SASS would be effective https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L566 https://github.com/t4t5/sweetalert/blob/master/lib/sweet-ale... - Includes jquery, but uses it very little, instead opting to re-invent the wheel in most cases. - Strange click event firing, gratuitous use of magic key code numbers https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L391 https://github.com/t4t5/sweetalert/blob/master/lib/sweet-ale... etc...
- deleted 12y ago[deleted]
- scottydelta 12y agoWhat about the alert type which contains a text box? something like: http://www.pastemehere.com/34pvxrtc http://www.pastemehere.com/34pvxrtc
- Tloewald 12y agoWhere's prompt? 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.
- enesunal 12y agomeh.. there is nothing like classical alert in the universe! <3