Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jquery（zepto）开发，专注于性能,为用户在各种平台下提供良好的体验。使用非常简单，特点就是：非常好用。  

快速入门demo

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

第一步： 添加脚本支持

<!-- Magnific Popup core css file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

第二步： 添加html标签

<!-- 添加一个a标签，设置href属性指向一个要弹出来的一个div盒子。 -->
<a href="#pop" class="button is-large has-text-primary" id="btn">添加</a>

<!-- 以下就是要弹出来的层，注意：添加mfp-hide先进行隐藏起来。 -->
<div id="pop" class="mfp-hide">
  <lable for="sname">用户名</lable><input type="text" id="sname" name="ss" value="">
  <hr>
  <input type="button" value="关闭" id="btnClose">
</div>

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

#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，是否是模态对话框。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1667