灯箱效果插件Magnific Popup详解

Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jQuery（zepto）开发，使用非常简单，特点就是：非常好用。

官网地址： http://dimsemenov.com/plugins/magnific-popup/

Github地址：https://github.com/dimsemenov/Magnific-Popup

先看个效果吧：

快速入门demo

先做一个简单的，把一个div弹出来的效果。

第一步： 添加脚本支持

第二步： 添加html标签

添加



  用户名
  

  

第三步： 给弹出来的层添加点样式

#pop {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

第四步： 初始化弹出来的层和a标签的点击事件。

// 给超级连接添加magnificPopup初始化方法。
$('#btn').magnificPopup({
  type: 'inline',         // 行内的类型，类比图片的模式
  closeBtnInside: true,   // 显示关闭按钮
  closeOnBgClick: false  // 点击遮罩透明背景关闭弹出层
});

magnificPopup方法的选项设置

• mainClass： String类型，要添加到根元素上的样式类。默认是空字符串。
• closeOnContentClick： Boolean类型，默认false，点击内容区域关闭弹出层。
• closeOnBgClick： Boolean类型，默认true，点击背景区域关闭弹出层。
• closeBtnInside： Boolean类型，默认true，是否有内置的关闭按钮。
• modal： Boolean类型，默认false，是否是模态对话框。

常用的其他api

• 关闭图层close方法： $.fn.magnificPopup('close');
• 打开弹出层open方法：$.fn.magnificPopup('open')
• 下一个图片next方法： $('.element-with-popup').magnificPopup('next');

其他方法：$.fn.magnificPopup('methodName' /*, param1, param2 ... */)

其他demo

• 图片demo

  Open popup 1
  Open popup 2
  Open popup 3

• 图片demo2

总结

这个插件还是非常好用的，使用简单方便，而且api也都很人性化。压缩后的js才20k，也算很小，lightbox效果也很棒。你值得拥有。