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

V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

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

GitHub ：

https://github.com/shifuchen/PeekBar

优势：

无需在新窗口打开页面；
应用于移动端时，弹窗中的内容可以很容易被大拇指点按到。

可能的使用场景：

浏览多图的文章时，在点击一张缩略图后弹出一张大图；
弹出一条警告，需要用户专心作出选择；
登录或注册；
推送通知；
正在加载……

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

希望你会喜欢！

Enjoy it!

第 1 条附言 · 2015-10-14 09:27:09 +08:00

Azure 终于恢复了……
于是做了个 Demo ：
http://nextearn.me/peekbar/

弹窗

缩略图

窗口

peekbar

22 条回复 • 2015-10-16 04:11:49 +08:00

MinonHeart

2015-10-13 21:42:00 +08:00 via Android

JS 写的非常溜 ^﹏^
没个 demo

shifuchen

2015-10-13 21:43:51 +08:00

@MinonHeart 本来打算把 demo 传到我博客上的，然而……我用的 Azure 的虚拟机，赶上这两天的停电事故……所以就挂了……

lizhenda

2015-10-13 21:49:44 +08:00

有 demo 更好啦~

shifuchen

2015-10-13 21:51:48 +08:00

@lizhenda 等 Azure 恢复之后第一时间传上去～

gimp

2015-10-13 21:57:36 +08:00

帮楼主做了个简单的演示

shifuchen

2015-10-13 22:01:21 +08:00

@gimp 非常感谢！

sox

2015-10-13 22:04:54 +08:00

JS 非常 6 XD

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

2015-10-13 22:10:51 +08:00

@sox 嗯……因为做这个 project 的灵感就是来源于今天早上访问的一个多图的网站：点击一个缩略图就会弹出大图。但是我感觉体验不是很好，于是就灵光一现，干脆自己做了一个……

sox

2015-10-13 22:15:23 +08:00

@shifuchen 你并没懂我说的，我只是觉得这段 JS 非常 6...

shifuchen

2015-10-13 22:17:10 +08:00

@sox 233... 话说你的头像好有魔性……

luoway

2015-10-13 22:30:20 +08:00

@shifuchen $(document.getElementById("photo"))这里出问题了，$是 jq 的 DOM 查找，里面是 JS 的。二三行直接合并就好了。真的“ 6 ”。

@sox PM 跟你什么仇什么怨

shifuchen

2015-10-13 22:41:14 +08:00

@luoway 刚刚尝试去掉 $( 和 ) ，只保留 document.getElementById("photo")，然后在 Safari 里面测试，点击图片就没反应了……

exoticknight

2015-10-13 22:42:27 +08:00

思路可以，代码就……

shifuchen

2015-10-13 22:42:54 +08:00

@exoticknight 代码渣，毕竟不是专业的，求轻喷……

exoticknight

2015-10-13 22:43:53 +08:00

@shifuchen
因为 click 是 jQuery 对象的函数，不是原生 dom 元素的函数= =b

giuem

2015-10-13 22:46:07 +08:00 via Android

看不出有多“最”，楼主不妨看看这个 https://github.com/t4t5/sweetalert

luoway

2015-10-13 22:47:30 +08:00

@shifuchen 因为 click 是 jq 的方法……
js 就该是 onClick 了
既然用了 jQ 框架，当然该把所有的能换 jq 的换 jq 了。

luoway

2015-10-13 22:49:22 +08:00

@giuem 这个挺棒的，楼主的也不错，比大多数框架自动的好就成。
https://camo.githubusercontent.com/3144fa643139adee4eb7d01e2e0a63c12d0e0a72/68747470733a2f2f7261772e6769746875622e636f6d2f743474352f7377656574616c6572742f6d61737465722f7377656574616c6572742e676966

shifuchen

2015-10-13 22:50:58 +08:00

@luoway 学习了……谢谢！

shifuchen

2015-10-13 22:51:33 +08:00

@giuem 也是挺漂亮的一个方案。谢谢分享！

fuermosi777

2015-10-16 04:11:49 +08:00

弹出来以后浏览器会蹦出个滚动栏（ mac +chrome ）导致整个画面跳动一下