PeekBar - 也许是最优雅、最 Mobile-Friendly 的网页弹窗方案之一。
shifuchen · 2015-10-13 21:36:23 +08:00 · 3449 次点击这是一个创建于 3347 天前的主题，其中的信息可能已经有所发展或是发生改变。
分享一个今天写的 Web 弹出窗口方案。
GitHub ：
https://github.com/shifuchen/PeekBar
优势：
无需在新窗口打开页面；
应用于移动端时，弹窗中的内容可以很容易被大拇指点按到。
可能的使用场景：
浏览多图的文章时，在点击一张缩略图后弹出一张大图；
弹出一条警告，需要用户专心作出选择；
登录或注册；
推送通知；
正在加载……
当然你的点子肯定不仅仅局限于这些……
希望你会喜欢！
Enjoy it!
第 1 条附言 · 2015-10-14 09:27:09 +08:00
 |
1
MinonHeart 2015-10-13 21:42:00 +08:00 via Android
JS 写的非常溜 ^﹏^
没个 demo |
 |
2
shifuchen OP @MinonHeart 本来打算把 demo 传到我博客上的，然而……我用的 Azure 的虚拟机，赶上这两天的停电事故……所以就挂了……
|
 |
3
lizhenda 2015-10-13 21:49:44 +08:00
有 demo 更好啦~
|
 |
5
gimp 2015-10-13 21:57:36 +08:00  1
 帮楼主做了个简单的演示 |
 |
7
sox 2015-10-13 22:04:54 +08:00
JS 非常 6 XD
|
|
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 中显示大图，其地址与页面上原图的地址相同 |
|
9
shifuchen OP @sox 嗯……因为做这个 project 的灵感就是来源于今天早上访问的一个多图的网站：点击一个缩略图就会弹出大图。但是我感觉体验不是很好，于是就灵光一现，干脆自己做了一个……
|
 |
12
luoway 2015-10-13 22:30:20 +08:00
|
|
13
shifuchen OP @luoway 刚刚尝试去掉 $( 和 ) ，只保留 document.getElementById("photo")，然后在 Safari 里面测试，点击图片就没反应了……
|
 |
14
exoticknight 2015-10-13 22:42:27 +08:00
思路可以，代码就……
|
|
15
shifuchen OP @exoticknight 代码渣，毕竟不是专业的，求轻喷……
|
|
16
exoticknight 2015-10-13 22:43:53 +08:00
@shifuchen
因为 click 是 jQuery 对象的函数，不是原生 dom 元素的函数= =b |
 |
17
giuem 2015-10-13 22:46:07 +08:00 via Android 1
看不出有多“最”，楼主不妨看看这个 https://github.com/t4t5/sweetalert
|
|
18
luoway 2015-10-13 22:47:30 +08:00
|
|
19
luoway 2015-10-13 22:49:22 +08:00
|
 |
22
fuermosi777 2015-10-16 04:11:49 +08:00
弹出来以后 浏览器会蹦出个滚动栏 （ mac +chrome ）导致整个画面跳动一下
|
Select Language