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

[shifuchen]

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

## GitHub ：

https://github.com/shifuchen/PeekBar

## 优势：

- 无需在新窗口打开页面；

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

## 可能的使用场景：

- 浏览多图的文章时，在点击一张缩略图后弹出一张大图；

- 弹出一条警告，需要用户专心作出选择；

- 登录或注册；

- 推送通知；

- 正在加载……

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

希望你会喜欢！

Enjoy it!

[MinonHeart]

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

[shifuchen]

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

[lizhenda]

有 demo 更好啦~

[shifuchen]

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

[gimp]

帮楼主做了个简单的演示

[shifuchen]

@gimp 非常感谢！

[sox]

JS 非常 6 XD

[sox]

我并不想说什么，只是。。。我看到。。

$(document.getElementById("photo")).click(function () { // 点击内容
var imglnk = this.src; // 获取所点击的这张图的地址
document.getElementById("photoInBar").src = imglnk; // 在 PeekBar 中显示大图，其地址与页面上原图的地址相同

[shifuchen]

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

[sox]

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

[shifuchen]

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

[luoway]

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


@sox PM 跟你什么仇什么怨

[shifuchen]

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

[exoticknight]

思路可以，代码就……

[shifuchen]

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

[exoticknight]

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

[giuem]

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

[luoway]

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

[luoway]

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

[shifuchen]

@luoway 学习了……谢谢！