V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pseudo
V2EX  ›  程序员

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

  •  1
     
  •   pseudo · 2016-07-12 12:28:58 +08:00 · 5051 次点击
    这是一个创建于 3056 天前的主题,其中的信息可能已经有所发展或是发生改变。

    每次看到 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

    43 条回复    2016-07-19 11:45:19 +08:00
    xiaoyao9933
        1
    xiaoyao9933  
       2016-07-12 12:36:55 +08:00
    mac safari 下没有动画效果。。
    ibreaker
        2
    ibreaker  
       2016-07-12 12:41:30 +08:00
    Chrome 弹过 alert 吗 没注意过
    7654
        3
    7654  
       2016-07-12 12:48:09 +08:00
    firefox 里也很漂亮
    bdbai
        4
    bdbai  
       2016-07-12 13:01:21 +08:00 via Android
    然而原生函数是同步的。
    建议支持一下 Promise 呗。
    yxzblue
        5
    yxzblue  
       2016-07-12 13:04:02 +08:00
    还可以,不过效果和 SweetAlert 这个库一样~
    miaotaizi
        6
    miaotaizi  
       2016-07-12 13:05:18 +08:00
    难道楼主没听说过 layer.js 吗?
    pseudo
        7
    pseudo  
    OP
       2016-07-12 14:21:28 +08:00
    @xiaoyao9933 我的有的呀,是不是因为不是新版
    @ibreaker 应该是越来越少了
    @7654 一直在用 Chrome ,下载一个 Firefox 看看啥效果
    @bdbai 谢谢你的建议~好呀,我先学习一下 promise
    @yxzblue 写之前看到这个库啦,动画效果有参考它。但觉得它太大了就自己写了一个,也当是给自己练练手吧
    @miaotaizi 还真没有诶
    Patrick95
        8
    Patrick95  
       2016-07-12 14:31:40 +08:00
    加一个「加载中」的动画呀~
    pseudo
        9
    pseudo  
    OP
       2016-07-12 14:46:05 +08:00
    @Patrick95 有呀,在主页上的演示中有得
    rrfeng
        10
    rrfeng  
       2016-07-12 14:47:07 +08:00
    3.4k 还小吗……
    hkongm
        11
    hkongm  
       2016-07-12 14:47:08 +08:00
    说点别的,这代码缩紧。。。
    Patrick95
        12
    Patrick95  
       2016-07-12 14:48:52 +08:00
    @pseudo 看到了,很不错~
    BOYPT
        13
    BOYPT  
       2016-07-12 14:52:54 +08:00
    如果项目里面用了 bootstrap 的话我推荐 sco.js 里面的 confirm ,简单方便
    http://projects.5mins.me/sco.js/#confirm
    xiaoyao9933
        14
    xiaoyao9933  
       2016-07-12 14:55:10 +08:00
    @pseudo 我的是 版本 8.0.7 (10600.7.12) , 你代码 demo 那里也是黑乎乎一片,不显示。其他浏览器 ok 。
    pseudo
        15
    pseudo  
    OP
       2016-07-12 15:13:44 +08:00
    @rrfeng 对比了一下同类的库感觉算小了,如果只是简单实现原始的三个功能确实不算小..
    @hkongm 是不是因为我用的 tab 符在 Github 上变成八个空格了...
    @Patrick95 谢谢你的鼓励~
    @BOYPT 谢谢推荐~
    @xiaoyao9933 我的是 9.1.1 ,应该是没有加-webkit-前缀的原因,我会在更新中加上的兼容性前缀的
    SvenWong
        16
    SvenWong  
       2016-07-12 15:16:31 +08:00
    个人感觉配色有点不太协调,不过还是给你 star ,加油
    rekulas
        17
    rekulas  
       2016-07-12 15:19:39 +08:00   ❤️ 1
    挺不错 我现在用的 sweetalert 弹出时候的动作有点类似 http://t4t5.github.io/sweetalert/
    dongyado
        18
    dongyado  
       2016-07-12 15:23:30 +08:00
    @rekulas 你这个也很漂亮
    pseudo
        19
    pseudo  
    OP
       2016-07-12 16:24:43 +08:00
    @SvenWong 谢谢,没有系统学过设计,凭感觉配色的,我会继续努力的~
    @rekulas 有参考它的动画, sweetalert 确实很棒
    cchange
        20
    cchange  
       2016-07-12 17:16:10 +08:00
    @rekulas 确实不错 主要是火狐可用
    都加油!
    spoonwep
        21
    spoonwep  
       2016-07-12 17:31:35 +08:00
    想起 sweetalert..
    miaotaizi
        22
    miaotaizi  
       2016-07-12 17:44:49 +08:00
    @pseudo 好啦, 给你一个 star, 加油!
    pseudo
        23
    pseudo  
    OP
       2016-07-12 21:15:38 +08:00
    @cchange 加油!
    @miaotaizi 谢谢你!
    lslqtz
        24
    lslqtz  
       2016-07-12 21:45:32 +08:00 via iPhone
    有趣 已 Star 。
    未来我估计自己会用上
    br00k
        25
    br00k  
       2016-07-12 23:28:18 +08:00
    还不错。不过 UI 组件要一套才好用,不然风格搭起来会怪怪得。
    zkd8907
        26
    zkd8907  
       2016-07-12 23:30:05 +08:00
    对无障碍支持基本为零 =.=
    wujunze
        27
    wujunze  
       2016-07-12 23:31:54 +08:00
    不错 赞一个
    cocalrush
        28
    cocalrush  
       2016-07-12 23:40:56 +08:00 via Android
    不错 搜藏一个
    Canrz
        29
    Canrz  
       2016-07-12 23:41:49 +08:00
    囧,这种提示组件本人用的 layer.js
    pseudo
        30
    pseudo  
    OP
       2016-07-12 23:48:43 +08:00
    @lslqtz 谢谢你~
    @br00k 谢谢你的建议,有扩充到各种 UI 组件的想法
    @zkd8907 请问无障碍是指?
    @cocalrush
    @wujunze 谢谢你们!
    @Canrz 也不错诶
    zkd8907
        31
    zkd8907  
       2016-07-13 00:11:20 +08:00
    @pseudo
    tab 键获得焦点, aria 相关的属性, title 属性。另外我看你按钮似乎是使用 div 模拟的,这样盲人用户遇到这个弹窗操作起来会非常困难。还有一个, alert 打开以后,需要考虑默认的 button 焦点~~

    上面这些对于大部分用户来说可以没有,最多就是操作时不太顺手(比如键盘党),但是对于残障人士来说是很关键的。组件化的东西,我觉得无障碍是非常重要的一个元素 =。= 楼主加油研究下~~
    pseudo
        32
    pseudo  
    OP
       2016-07-13 00:15:35 +08:00
    @zkd8907 好的我去研究研究,下一次更新中会加入键盘相应的,十分感谢你的建议!
    lslqtz
        33
    lslqtz  
       2016-07-13 07:46:16 +08:00
    感觉异步操作等待后的 Done 应该移到中间一些。。
    BMW
        34
    BMW  
       2016-07-13 08:24:23 +08:00
    名字起的太挫
    shiweifu
        35
    shiweifu  
       2016-07-13 09:38:37 +08:00
    @pseudo

    无障碍指的是有使用障碍的用户,比如盲人
    j
        36
    j  
       2016-07-13 09:58:33 +08:00
    不用依赖 jquery 是亮点。
    zwh8800
        37
    zwh8800  
       2016-07-13 12:57:48 +08:00
    不错,提个小建议,如果支持键盘回车键就更好了
    xieguanglei
        38
    xieguanglei  
       2016-07-13 13:20:57 +08:00
    alert 是同步的,这个替代不了。。
    pseudo
        39
    pseudo  
    OP
       2016-07-13 13:30:11 +08:00
    @lslqtz 这个可以自己设置呀
    @shiweifu 谢谢!
    @j 依赖 jQuery 就会让使用者麻烦一些,所以都写原生的了
    @zwh8800 下一个更新中会加入按键响应的
    @xieguanglei 我愿意为了漂亮一点牺牲同步这个特点,哈哈
    Arrowing
        40
    Arrowing  
       2016-07-13 15:44:51 +08:00
    能动手是好事,支持一个!

    PS :我的 Firefox 点击没反应, V41
    nakedou
        41
    nakedou  
       2016-07-13 21:51:57 +08:00
    效果不错,赞一个
    pseudo
        42
    pseudo  
    OP
       2016-07-14 13:45:16 +08:00
    @Arrowing 谢谢!我在 V47 上 OK , console 有没有报错呢?
    @nakedou 谢谢你~
    pseudo
        43
    pseudo  
    OP
       2016-07-19 11:45:19 +08:00
    @zwh8800
    @zkd8907
    现在已经添加键盘响应啦,并可以用 tab 来控制焦点
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2679 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 03:35 · PVG 11:35 · LAX 19:35 · JFK 22:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.