V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
shifuchen
V2EX  ›  分享创造

PeekBar - 也许是最优雅、最 Mobile-Friendly 的网页弹窗方案之一。

  •  
  •   shifuchen · 2015-10-13 21:36:23 +08:00 · 3435 次点击
    这是一个创建于 3328 天前的主题,其中的信息可能已经有所发展或是发生改变。

    分享一个今天写的 Web 弹出窗口方案。

    GitHub :

    https://github.com/shifuchen/PeekBar

    优势:

    • 无需在新窗口打开页面;

    • 应用于移动端时,弹窗中的内容可以很容易被大拇指点按到。

    可能的使用场景:

    • 浏览多图的文章时,在点击一张缩略图后弹出一张大图;

    • 弹出一条警告,需要用户专心作出选择;

    • 登录或注册;

    • 推送通知;

    • 正在加载……

    当然你的点子肯定不仅仅局限于这些……

    希望你会喜欢!

    Enjoy it!

    第 1 条附言  ·  2015-10-14 09:27:09 +08:00
    Azure 终于恢复了……
    于是做了个 Demo :
    http://nextearn.me/peekbar/
    22 条回复    2015-10-16 04:11:49 +08:00
    MinonHeart
        1
    MinonHeart  
       2015-10-13 21:42:00 +08:00 via Android
    JS 写的非常溜 ^﹏^
    没个 demo
    shifuchen
        2
    shifuchen  
    OP
       2015-10-13 21:43:51 +08:00
    @MinonHeart 本来打算把 demo 传到我博客上的,然而……我用的 Azure 的虚拟机,赶上这两天的停电事故……所以就挂了……
    lizhenda
        3
    lizhenda  
       2015-10-13 21:49:44 +08:00
    有 demo 更好啦~
    shifuchen
        4
    shifuchen  
    OP
       2015-10-13 21:51:48 +08:00
    @lizhenda 等 Azure 恢复之后第一时间传上去~
    gimp
        5
    gimp  
       2015-10-13 21:57:36 +08:00   ❤️ 1


    帮楼主做了个简单的演示
    shifuchen
        6
    shifuchen  
    OP
       2015-10-13 22:01:21 +08:00
    @gimp 非常感谢!
    sox
        7
    sox  
       2015-10-13 22:04:54 +08:00
    JS 非常 6 XD
    sox
        8
    sox  
       2015-10-13 22:06:49 +08:00
    我并不想说什么,只是。。。我看到。。

    $(document.getElementById("photo")).click(function () { // 点击内容
    var imglnk = this.src; // 获取所点击的这张图的地址
    document.getElementById("photoInBar").src = imglnk; // 在 PeekBar 中显示大图,其地址与页面上原图的地址相同
    shifuchen
        9
    shifuchen  
    OP
       2015-10-13 22:10:51 +08:00
    @sox 嗯……因为做这个 project 的灵感就是来源于今天早上访问的一个多图的网站:点击一个缩略图就会弹出大图。但是我感觉体验不是很好,于是就灵光一现,干脆自己做了一个……
    sox
        10
    sox  
       2015-10-13 22:15:23 +08:00
    @shifuchen 你并没懂我说的,我只是觉得这段 JS 非常 6...
    shifuchen
        11
    shifuchen  
    OP
       2015-10-13 22:17:10 +08:00
    @sox 233... 话说你的头像好有魔性……
    luoway
        12
    luoway  
       2015-10-13 22:30:20 +08:00
    @shifuchen $(document.getElementById("photo"))这里出问题了,$是 jq 的 DOM 查找,里面是 JS 的。二三行直接合并就好了。真的“ 6 ”。


    @sox PM 跟你什么仇什么怨
    shifuchen
        13
    shifuchen  
    OP
       2015-10-13 22:41:14 +08:00
    @luoway 刚刚尝试去掉 $( 和 ) ,只保留 document.getElementById("photo"),然后在 Safari 里面测试,点击图片就没反应了……
    exoticknight
        14
    exoticknight  
       2015-10-13 22:42:27 +08:00
    思路可以,代码就……
    shifuchen
        15
    shifuchen  
    OP
       2015-10-13 22:42:54 +08:00
    @exoticknight 代码渣,毕竟不是专业的,求轻喷……
    exoticknight
        16
    exoticknight  
       2015-10-13 22:43:53 +08:00
    @shifuchen
    因为 click 是 jQuery 对象的函数,不是原生 dom 元素的函数= =b
    giuem
        17
    giuem  
       2015-10-13 22:46:07 +08:00 via Android   ❤️ 1
    看不出有多“最”,楼主不妨看看这个 https://github.com/t4t5/sweetalert
    luoway
        18
    luoway  
       2015-10-13 22:47:30 +08:00
    @shifuchen 因为 click 是 jq 的方法……
    js 就该是 onClick 了
    既然用了 jQ 框架,当然该把所有的能换 jq 的换 jq 了。
    shifuchen
        20
    shifuchen  
    OP
       2015-10-13 22:50:58 +08:00
    @luoway 学习了……谢谢!
    shifuchen
        21
    shifuchen  
    OP
       2015-10-13 22:51:33 +08:00
    @giuem 也是挺漂亮的一个方案。谢谢分享!
    fuermosi777
        22
    fuermosi777  
       2015-10-16 04:11:49 +08:00
    弹出来以后 浏览器会蹦出个滚动栏 ( mac +chrome )导致整个画面跳动一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1026 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 19:36 · PVG 03:36 · LAX 11:36 · JFK 14:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.