ajax 灯箱效果,灯箱效果插件Magnific Popup详解

Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jQuery(zepto)开发，使用非常简单，特点就是：非常好用。

先看个效果吧：

快速入门demo

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

第一步：添加脚本支持

第二步：添加html标签

添加

用户名

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

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

常用的其他api

关闭图层close方法： $.fn.magnificPopup('close');

打开弹出层open方法：$.fn.magnificPopup('open')

下一个图片next方法： $('.element-with-popup').magnificPopup('next');

其他方法：$.fn.magnificPopup('methodName' /*, param1, param2 ... */)

其他demo

图片demo

Open popup 1

Open popup 2

Open popup 3

$('.parent-container').magnificPopup({

delegate: 'a', // child items selector, by clicking on it popup will open

type: 'image'

// other options

});

图片demo2

$(document).ready(function() {

$('.popup-gallery').magnificPopup({

delegate: 'a',

type: 'image',

tLoading: 'Loading image #%curr%...',

mainClass: 'mfp-img-mobile',

gallery: {

enabled: true,

navigateByImgClick: true,

preload: [0,1] // Will preload 0 - before current, and 1 after the current image

image: {

tError: 'The image #%curr% could not be loaded.',

titleSrc: function(item) {

return item.el.attr('title') + 'by Marsel Van Oosten';

}

});

ajax 灯箱效果,灯箱效果插件Magnific Popup详解相关推荐

python做插件应用_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
python插件使用教程_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
python加载机制_Python插件机制实现详解
插件机制是代码/功能反向依赖注入到主体程序的一种方法,编译型语言通过动态加载动态库实现插件.对于Python这样的脚本语言,实现插件机制更简单. 机制 Python的__import__方法可以动态地 ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
jquery.uploadify php,jquery插件uploadify使用详解
这次给大家带来jquery插件uploadify使用详解,jquery插件uploadify使用的注意事项有哪些,下面就是实战案例,一起来看一下. 有时项目中需要一个文件批量上传功能时,个人认为upl ...
移动端JQ插件hammer使用详解
** 移动端JQ插件hammer使用详解 ** 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上hammer就可以了 var hamme ...
macd指标在实战应用中效果如何,如何证明MACD指标详解能起到预警的作用
<MACD指标详解>课程学员:如何判定MACD的实战效果? 同济桥博士:大家好,欢迎来到<MACD指标详解>课堂,我是老桥!因为这门课程也推出有半年多的时间了,我们也来总结一下 ...
Android初级，实现网易云音乐歌曲列表界面效果，播放界面效果，ListView，ViewPager方法详解
初学Android初级,第一篇博客文章,如有错误,还望批评指正! 本文主要内容以网易云音乐歌曲列表界面效果代码,播放音乐界面效果代码为主,并将ListView和ViewPager作为实现界面滑动功能的 ...
Jenkins 从选择插件到配置详解-Gradle
1.入门安装重要插件 Publish Over SSH: SSH连接服务器插件Git 相关: 代码拉取gradle: 用于项目打包 2.Jenkins 创建项目到配置详解 1.创建一个自由风格的软件项 ...
vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」
作者:lishuai 转发链接:https://segmentfault.com/a/1190000022757326 前言 vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布( ...

ajax 灯箱效果,灯箱效果插件Magnific Popup详解

ajax 灯箱效果,灯箱效果插件Magnific Popup详解相关推荐

最新文章

热门文章