fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Magnific-Popup
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://dimsemenov.com/plugins/magnific-popup/
GitHub:https://github.com/dimsemenov/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://fly63.com/nav/1667

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览