
A replacement for JavaScript's “alert” - thefox
https://github.com/t4t5/sweetalert
======
onion2k
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."

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
True 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
As 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.

~~~
acdha
One of the examples shows that they have a single callback function:

[http://tristanedwards.me/sweetalert](http://tristanedwards.me/sweetalert)

Unfortunately, there's only one function so this isn't useful if you want to
run code when the user cancels the dialog:

[https://github.com/t4t5/sweetalert/blob/750a0fd72c3beaa6d4d7...](https://github.com/t4t5/sweetalert/blob/750a0fd72c3beaa6d4d71336290def4d71d3ecd2/lib/sweet-
alert.js#L298)

------
hcho
Not a replacement really; doesn't mimic the function signature, is not
blocking as the alert etc etc

~~~
colinramsay
It'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
Yes, is possible! [https://github.com/al0p/wow-
alert](https://github.com/al0p/wow-alert)

~~~
scottcanoni
What 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.

~~~
Stratoscope
> [Wow Alert] overrides the existing alert function.

That is an absolutely terrible idea. It overrides alert() but doesn't - and
_can 't_ \- duplicate its blocking behavior.

I'm not criticizing you for liking the idea! I can see its appeal myself. I'm
criticizing Wow Alert for letting a nifty idea result in bad sofware design.

[https://github.com/al0p/wow-
alert/blob/b3224bc34fea6a49aac2d...](https://github.com/al0p/wow-
alert/blob/b3224bc34fea6a49aac2dfb18707120790828c98/wow-alert.js#L60)

Their version of window.alert() returns immediately after setting up the alert
window and actions - because that's all it is capable of.

If you just drop this into existing code without inspecting each and every
alert() call to make sure it doesn't rely on the blocking - both in your own
code and every library you use - you will definitely break things.

Far better to leave alert() alone and make this a separate function with its
own name.

~~~
aidanhs
> It overrides alert() but doesn't - and can't - duplicate its blocking
> behavior.

If you _really_ wanted to, I think you could set up an endpoint on your server
to be long polled with synchronous XHR in a while loop, while you set up the
popup in an iframe. When the popup is clicked, you send a notification to the
server so the next synchronous request returns 200 and you dispose of the
iframe.

On searching, I discover someone else has had this crazy idea already -
[http://stackoverflow.com/questions/16934667/what-methods-
are...](http://stackoverflow.com/questions/16934667/what-methods-are-blocking-
in-javascript)

~~~
Stratoscope
I like that kind of insane creativity!

I'm surprised that the SO poster got the synchronous XHR approach to work.
When I did some tests with Chromium last year they seemed to show that an
iframe runs in the same thread as its parent window. I wasn't testing XHR
though, just animation.

So if you ever do try this out, I would be interested to hear the results.
Thanks!

------
nfoz
In the year 2014, obnoxious popups are described as "beautiful" and "awesome".

------
anigbrowl
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.

~~~
jhdevos
In 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...

------
moberemk
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).

------
akerbeltz
Funny to see that when you click the "Yes, delete it!" button in the examples,
a regular alert is displayed...

~~~
nopar8
I thought the same thing!

We'll be nice and give the author the benefit of the doubt and say it's
juxtaposition :P

------
romanovcode
\- 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.

------
accessresource
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.

~~~
chc
Are you having some difficulty? It works for me with the keyboard.

~~~
accessresource
Apologies, it appears that keyboard handlers have been added since I last
tested this a few days ago.

[https://github.com/t4t5/sweetalert/commit/2413e5cbcd1fe3d6e1...](https://github.com/t4t5/sweetalert/commit/2413e5cbcd1fe3d6e1f724716c4f972f803a2380)

------
tshadwell
Though 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-
ale...](https://github.com/t4t5/sweetalert/blob/master/lib/sweet-
alert.js#L258-L303)

\- 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-
ale...](https://github.com/t4t5/sweetalert/blob/master/lib/sweet-
alert.js#L566)

\- 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-
ale...](https://github.com/t4t5/sweetalert/blob/master/lib/sweet-
alert.js#L391)

etc...

------
nyolfen
what's with the recent surge in use of the word 'beautiful' to describe
minimal UI elements

~~~
discreteevent
I 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
The 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
It's marketing.

------
kevind23
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.

------
jrs235
Is 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
No (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.

~~~
jrs235
Thank you. I submitted the 'issue'.

------
JonRB
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.

------
Fargillsta
What 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
As a non-native English speaker, it feels weird seeing phrases like this. In
my opinion, a more appropriate word would be 'elegant'.

------
mmorris
Looks 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
This 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
I 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)

------
kurumin
[https://github.com/al0p/wow-alert](https://github.com/al0p/wow-alert)

~~~
chandrew
Linked demo would be nice :P

------
Siecje
You 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.

------
amadeusw
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!

~~~
xiaq
It's no coincidence that frontend developers make good websites :)

------
eterm
There'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.

------
scottydelta
What about the alert type which contains a text box? something like:
[http://www.pastemehere.com/34pvxrtc](http://www.pastemehere.com/34pvxrtc)

------
donpark
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.

------
Tloewald
Where'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.

------
ck2
a 20k replacement...

------
cmstoken
Awesome 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?

------
m1117
The only time I use alerts is for debugging purposes

~~~
oftenwrong
And finding XSS vulnerabilities in the wild.

------
Thieum22
I use blockui for this kind of thing:

[http://malsup.com/jquery/block/](http://malsup.com/jquery/block/)

------
sandeep45
looks nice and friendly use. i look forward to using it. But when it comes to
replacement, its not blocking. So its not a replacement.

------
jafingi
It looks great, but funny that it shows a normal Javascript alert when
clicking the confirm button in the example.

But needs more callback functions...

------
protonfish
Nice, but I have found the native implementations don't look as bad as they
used to, especially on mobile web.

~~~
anton-107
There 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
I think if you don't want block the UI thread you shouldn't be using alerts.
That is the whole point of it.

------
prayerslayer
Then there's also smoke.js

[http://smoke-js.com/](http://smoke-js.com/)

------
leeoniya
been 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

------
fiatjaf
This is awesome, but it should close when the user clicks out of its bounds.

~~~
orthecreedence
Like the alert box in browsers?

------
4684499
With alert(), user can copy the content of alert with Ctrl + C.

------
UUMMUU
why does the checkbox line only go part of the way around the circle?

------
enesunal
meh.. there is nothing like classical alert in the universe! <3

------
cosmeen
Sweet.

------
tbarbugli
this looks nice!

------
ssfdsafd
asfdasfdasfd

------
ssfdsafd
sdfasdfasfd

------
curiously
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.

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.

