Magnific-Popup

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,// 显示关闭按钮

cloSEOnBgClick: false // 点击遮罩透明背景关闭弹出层

});

magnificPopup方法的选项设置

mainClass： String类型，要添加到根元素上的样式类。默认是空字符串。

cloSEOnContentClick： Boolean类型，默认false，点击内容区域关闭弹出层。

cloSEOnBgClick： 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/