Magnific-Popup 介绍
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,// 显示 关闭 按钮
clo SEO nBgClick: false // 点击遮罩透明背景 关闭 弹出层
});
magnificPopup 方法 的选项设置
mainClass： String类型，要 添加 到根元素上的样式类。 默 认是空字符串。
clo SEO nContentClick： Boolean类型， 默 认false，点击 内容 区域 关闭 弹出层。
clo SEO nBgClick： Boolean类型， 默 认true，点击背景区域 关闭 弹出层。
closeBtnInside： Boolean类型， 默 认true，是否有内置的 关闭 按钮。
modal： Boolean类型， 默 认false，是否是模态对话框。
网站地址 : https://dimsemenov.com/plugins/magnific-popup/
GitHub: https://github.com/dimsemenov/Magnific-Popup
网站描述: 一个 非常优秀的弹出对话框或者灯箱 效果 插件
Magnific-Popup官方网站
官方网站： https://dimsemenov.com/plugins/magnific-popup/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。