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/
小编说
以上是编程之家为你收集整理的Magnific-Popup全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。