厌倦了自带的 alert？来试试我最近写的小项目吧！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3054 天前的主题，其中的信息可能已经有所发展或是发生改变。

每次看到 Chrome 弹出的丑丑的 alert 总想能不能让它变漂亮一点，于是自己动手写了一个。

Confirm Popup

它不光可以替代原本的 alert, confirm 和 prompt ，还有丰富的自定义选项；

它非常轻便， gzip 压缩后所有文件只有 3.4KB ，没有任何库的依赖，可以直接通过 npm/bower 安装；

它能直接适配移动端，还能自己写主题。

在线完整演示与文档

Github

如果喜欢的话，帮我点个 star 吧，谢谢啦～

第 1 条附言 · 2016-07-12 15:08:29 +08:00

异步操作等待

Async Operation

alert

confirm

丑丑

prompt

43 条回复 • 2016-07-19 11:45:19 +08:00

xiaoyao9933

2016-07-12 12:36:55 +08:00

mac safari 下没有动画效果。。

ibreaker

2016-07-12 12:41:30 +08:00

Chrome 弹过 alert 吗没注意过

7654

2016-07-12 12:48:09 +08:00

firefox 里也很漂亮

bdbai

2016-07-12 13:01:21 +08:00 via Android

然而原生函数是同步的。
建议支持一下 Promise 呗。

yxzblue

2016-07-12 13:04:02 +08:00

还可以，不过效果和 SweetAlert 这个库一样~

miaotaizi

2016-07-12 13:05:18 +08:00

难道楼主没听说过 layer.js 吗?

pseudo

2016-07-12 14:21:28 +08:00

@xiaoyao9933 我的有的呀，是不是因为不是新版
@ibreaker 应该是越来越少了
@7654 一直在用 Chrome ，下载一个 Firefox 看看啥效果
@bdbai 谢谢你的建议～好呀，我先学习一下 promise
@yxzblue 写之前看到这个库啦，动画效果有参考它。但觉得它太大了就自己写了一个，也当是给自己练练手吧
@miaotaizi 还真没有诶

Patrick95

2016-07-12 14:31:40 +08:00

加一个「加载中」的动画呀~

pseudo

2016-07-12 14:46:05 +08:00

@Patrick95 有呀，在主页上的演示中有得

rrfeng

2016-07-12 14:47:07 +08:00

3.4k 还小吗……

hkongm

2016-07-12 14:47:08 +08:00

说点别的，这代码缩紧。。。

Patrick95

2016-07-12 14:48:52 +08:00

@pseudo 看到了，很不错~

BOYPT

2016-07-12 14:52:54 +08:00

如果项目里面用了 bootstrap 的话我推荐 sco.js 里面的 confirm ，简单方便
http://projects.5mins.me/sco.js/#confirm

xiaoyao9933

2016-07-12 14:55:10 +08:00

@pseudo 我的是版本 8.0.7 (10600.7.12) ，你代码 demo 那里也是黑乎乎一片，不显示。其他浏览器 ok 。

pseudo

2016-07-12 15:13:44 +08:00

@rrfeng 对比了一下同类的库感觉算小了，如果只是简单实现原始的三个功能确实不算小..
@hkongm 是不是因为我用的 tab 符在 Github 上变成八个空格了...
@Patrick95 谢谢你的鼓励～
@BOYPT 谢谢推荐～
@xiaoyao9933 我的是 9.1.1 ，应该是没有加-webkit-前缀的原因，我会在更新中加上的兼容性前缀的

SvenWong

2016-07-12 15:16:31 +08:00

个人感觉配色有点不太协调，不过还是给你 star ，加油

rekulas

2016-07-12 15:19:39 +08:00

挺不错我现在用的 sweetalert 弹出时候的动作有点类似 http://t4t5.github.io/sweetalert/

dongyado

2016-07-12 15:23:30 +08:00

@rekulas 你这个也很漂亮

pseudo

2016-07-12 16:24:43 +08:00

@SvenWong 谢谢，没有系统学过设计，凭感觉配色的，我会继续努力的～
@rekulas 有参考它的动画， sweetalert 确实很棒

cchange

2016-07-12 17:16:10 +08:00

@rekulas 确实不错主要是火狐可用
都加油！

spoonwep

2016-07-12 17:31:35 +08:00

想起 sweetalert..

miaotaizi

2016-07-12 17:44:49 +08:00

@pseudo 好啦, 给你一个 star, 加油!

pseudo

2016-07-12 21:15:38 +08:00

@cchange 加油！
@miaotaizi 谢谢你！

lslqtz

2016-07-12 21:45:32 +08:00 via iPhone

有趣已 Star 。
未来我估计自己会用上

br00k

2016-07-12 23:28:18 +08:00

还不错。不过 UI 组件要一套才好用，不然风格搭起来会怪怪得。

zkd8907

2016-07-12 23:30:05 +08:00

对无障碍支持基本为零 =.=

wujunze

2016-07-12 23:31:54 +08:00

不错赞一个

cocalrush

2016-07-12 23:40:56 +08:00 via Android

不错搜藏一个

Canrz

2016-07-12 23:41:49 +08:00

囧，这种提示组件本人用的 layer.js

pseudo

2016-07-12 23:48:43 +08:00

@lslqtz 谢谢你～
@br00k 谢谢你的建议，有扩充到各种 UI 组件的想法
@zkd8907 请问无障碍是指？
@cocalrush
@wujunze 谢谢你们！
@Canrz 也不错诶

zkd8907

2016-07-13 00:11:20 +08:00

@pseudo
tab 键获得焦点， aria 相关的属性， title 属性。另外我看你按钮似乎是使用 div 模拟的，这样盲人用户遇到这个弹窗操作起来会非常困难。还有一个， alert 打开以后，需要考虑默认的 button 焦点~~

上面这些对于大部分用户来说可以没有，最多就是操作时不太顺手（比如键盘党），但是对于残障人士来说是很关键的。组件化的东西，我觉得无障碍是非常重要的一个元素 =。= 楼主加油研究下~~

pseudo

2016-07-13 00:15:35 +08:00

@zkd8907 好的我去研究研究，下一次更新中会加入键盘相应的，十分感谢你的建议！

lslqtz

2016-07-13 07:46:16 +08:00

感觉异步操作等待后的 Done 应该移到中间一些。。