Lightbox个性化弹出层效果
半透明背景的全屏弹层展示，lightbox 的效果确实挺抓眼球的，适合做图片和视频展示。你只要点一下缩略图，原图就能在当前页弹出来，既不跳转也不刷页面，用户体验还不错。
lightbox 的结构也挺简单，核心就三个部分：HTML 结构、CSS 样式、JavaScript 交互。比如你只要在标签里包一张图，加个class="lightbox"，点一下就能触发弹窗。
样式那块，主要靠一个.lightbox-overlay的遮罩来搞半透明背景，用position: fixed搞定定位，再加上rgba(0, 0, 0, 0.8)做背景色，看起来高级又不碍事。图片居中显示也不难，用个transform: translate(-50%, -50%)搞定。
交互逻辑也不复杂，用原生 JS 监听点击事件，动态改一下innerHTML就能切换大图，点一下外层就关闭，挺人性化的。如果你用jQuery，代码还能更短，省事多了。
你要是想玩得更花一点，比如加个键盘左右切换、动画缩放、加载动画之类的，也可以往上加。texiao752_1560681004压缩包里头应该有不少现成素材，看看就懂了，动手一试也不难。
如果你正好在搞图集展示、作品集或者商城图片预览，做一个 lightbox 弹层真的挺合适的。想找点灵感或样例，可以看看下面这几个：
如果你图省事，用现成插件省时省力；如果你想搞点自己的风格，那就动手改一改，说不定还能做个小组件给团队复用。
下载地址
用户评论
