TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

A replacement for JavaScript's “alert”

312 点作者 thefox超过 10 年前

40 条评论

onion2k超过 10 年前
This is a nice implementation of an alert, but ideally you shouldn&#x27;t ever need it. Alerts are a pretty horrible feature in a user&#x27;s experience. Essentially they say &quot;STOP WHAT YOU ARE DOING. THIS IS MORE IMPORTANT.&quot;<p>If something is that important then you&#x27;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&#x27;ll want a dialogue that asks them if they&#x27;re sure. That should block all other interaction because it really <i>is</i> important. When the user has no input though, and there&#x27;s nothing they can do but click &#x27;ok&#x27;, there&#x27;s no need to use an alert. Just put a message on the screen that&#x27;s high enough up the page&#x27;s information hierarchy that they&#x27;ve very likely to see it. Make it sticky (so it&#x27;s there until the user dismisses it, but doesn&#x27;t block other actions) if it&#x27;s something that they need to confirm that they&#x27;ve seen.<p>Don&#x27;t force the user to do things your way. Guide the user, sure, but let them do things their way.
评论 #8422153 未加载
评论 #8421566 未加载
hcho超过 10 年前
Not a replacement really; doesn&#x27;t mimic the function signature, is not blocking as the alert etc etc
评论 #8421443 未加载
评论 #8422049 未加载
nfoz超过 10 年前
In the year 2014, obnoxious popups are described as &quot;beautiful&quot; and &quot;awesome&quot;.
anigbrowl超过 10 年前
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.
评论 #8426601 未加载
moberemk超过 10 年前
Like other people here have pointed out, this isn&#x27;t exactly an alert replacement as much as it is a more limited form of modal dialog. And honestly if that&#x27;s what you need, there&#x27;s better solutions out there, even in the form of the HTML dialog element (whenever that comes into mainstream support at least).
akerbeltz超过 10 年前
Funny to see that when you click the &quot;Yes, delete it!&quot; button in the examples, a regular alert is displayed...
评论 #8421783 未加载
romanovcode超过 10 年前
- Doesn&#x27;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&#x27;s not serious.
accessresource超过 10 年前
Please do not use this until the authors ensure people using the keyboard alone &#x2F; screen readers can dismiss the dialog and access elements contained within.
评论 #8422511 未加载
tshadwell超过 10 年前
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:&#x2F;&#x2F;github.com&#x2F;t4t5&#x2F;sweetalert&#x2F;blob&#x2F;master&#x2F;lib&#x2F;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:&#x2F;&#x2F;github.com&#x2F;t4t5&#x2F;sweetalert&#x2F;blob&#x2F;master&#x2F;lib&#x2F;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:&#x2F;&#x2F;github.com&#x2F;t4t5&#x2F;sweetalert&#x2F;blob&#x2F;master&#x2F;lib&#x2F;sweet-ale...</a><p>etc...
nyolfen超过 10 年前
what&#x27;s with the recent surge in use of the word &#x27;beautiful&#x27; to describe minimal UI elements
评论 #8422001 未加载
评论 #8424676 未加载
kevind23超过 10 年前
Honestly the native version looks better to me. And it has the desired functionality of blocking the UI thread... I don&#x27;t think you should encourage anyone to use alerts by making them prettier.
jrs235超过 10 年前
Is the OP the author?<p>If so, there&#x27;s a slight typo on the &quot;See it in action!&quot; page (<a href="http://tristanedwards.me/sweetalert" rel="nofollow">http:&#x2F;&#x2F;tristanedwards.me&#x2F;sweetalert</a>). For the &quot;A warning message, with a function attached to the &quot;Confirm&quot;-button&quot; demo, the code displayed says &#x27;alert(&quot;Booyah!&quot;);&#x27; but the alert being displayed says &#x27;Deleted!&#x27;
评论 #8421403 未加载
JonRB超过 10 年前
Something I find annoying with this is that on mobile (haven&#x27;t tried other platforms) it goes back to the top of the page when a sweetalert opens.
Fargillsta超过 10 年前
What is &#x27;beautiful&#x27; about it? There&#x27;s absolutely nothing beautiful about it at all. I don&#x27;t think the OP realizes what &quot;beautiful&quot; means.<p>I recommend using the content in the link itself: it&#x27;s described as &#x27;awesome&#x27; not &#x27;beautiful&#x27;.<p>What&#x27;s funny is that since this doesn&#x27;t actually <i>work</i> like a JS Alert, it&#x27;s actually quite &#x27;ugly&#x27;. ;)
评论 #8421689 未加载
mmorris超过 10 年前
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&#x27;re probably not interested enough in user-friendly design to seek out this replacement.
评论 #8421519 未加载
kurumin超过 10 年前
<a href="https://github.com/al0p/wow-alert" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;al0p&#x2F;wow-alert</a>
评论 #8422042 未加载
Siecje超过 10 年前
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.
amadeusw超过 10 年前
Most comments critique the widget, but I&#x27;d like to talk about the demo website. It&#x27;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!
评论 #8422103 未加载
eterm超过 10 年前
There&#x27;s a bug in your example page:<p>Click the Confirm example: Click &quot;cancel&quot; to clear the dialogue.<p>Click the button again: Click &quot;delete me&quot; and you don&#x27;t get the deleted alert that you normally get.
scottydelta超过 10 年前
What about the alert type which contains a text box? something like: <a href="http://www.pastemehere.com/34pvxrtc" rel="nofollow">http:&#x2F;&#x2F;www.pastemehere.com&#x2F;34pvxrtc</a>
donpark超过 10 年前
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超过 10 年前
Where&#x27;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.
ck2超过 10 年前
a 20k replacement...
cmstoken超过 10 年前
Awesome work. But the contrast on the demo page is causing me health problems. It&#x27;s a sad song unto my soul. Can you make it more readable?
m1117超过 10 年前
The only time I use alerts is for debugging purposes
评论 #8424684 未加载
评论 #8422772 未加载
Thieum22超过 10 年前
I use blockui for this kind of thing:<p><a href="http://malsup.com/jquery/block/" rel="nofollow">http:&#x2F;&#x2F;malsup.com&#x2F;jquery&#x2F;block&#x2F;</a>
sandeep45超过 10 年前
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超过 10 年前
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...
protonfish超过 10 年前
Nice, but I have found the native implementations don&#x27;t look as bad as they used to, especially on mobile web.
评论 #8421432 未加载
prayerslayer超过 10 年前
Then there&#x27;s also smoke.js<p><a href="http://smoke-js.com/" rel="nofollow">http:&#x2F;&#x2F;smoke-js.com&#x2F;</a>
leeoniya超过 10 年前
been using this: <a href="https://github.com/fabien-d/alertify.js/pull/173" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;fabien-d&#x2F;alertify.js&#x2F;pull&#x2F;173</a>, which can replace alert, prompt and confirm
fiatjaf超过 10 年前
This is awesome, but it should close when the user clicks out of its bounds.
评论 #8422728 未加载
4684499超过 10 年前
With alert(), user can copy the content of alert with Ctrl + C.
UUMMUU超过 10 年前
why does the checkbox line only go part of the way around the circle?
enesunal超过 10 年前
meh.. there is nothing like classical alert in the universe! &lt;3
cosmeen超过 10 年前
Sweet.
tbarbugli超过 10 年前
this looks nice!
ssfdsafd超过 10 年前
asfdasfdasfd
ssfdsafd超过 10 年前
sdfasdfasfd
curiously超过 10 年前
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&#x27;t show up properly.<p>Chrome supports the &lt;dialog&gt; element which is guaranteed to appear on top of whatever page its injected on.<p>Javsacript&#x27;s Alert, prompt, also guarantee it will appear on top.