• 请不要在回答技术问题时复制粘贴 AI 生成的内容
pseudo
V2EX  ›  程序员

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

  •  1
     
  •   pseudo · Jul 12, 2016 · 6160 views
    This topic created in 3768 days ago, the information mentioned may be changed or developed.

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

    Confirm Popup

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

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

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

    在线完整演示与文档

    Github

    如果喜欢的话,帮我点个 star 吧,谢谢啦~

    Supplement 1  ·  Jul 12, 2016

    异步操作等待

    Async Operation

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

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

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

    PS :我的 Firefox 点击没反应, V41
    nakedou
    nakedou
    Jul 13, 2016
    41
    效果不错,赞一个
    pseudo
    pseudo
    OP
    Jul 14, 2016
    42
    @Arrowing 谢谢!我在 V47 上 OK , console 有没有报错呢?
    @nakedou 谢谢你~
    pseudo
    pseudo
    OP
    Jul 19, 2016
    43
    @zwh8800
    @zkd8907
    现在已经添加键盘响应啦,并可以用 tab 来控制焦点
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5041 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 83ms · UTC 07:12 · PVG 15:12 · LAX 23:12 · JFK 02:12
    ♥ Do have faith in what you're doing.