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';

}

}

});

});