插件描述:Magnific Popup 是一个响应式弹出层和对话框组件,专注于性能,为用户在各种平台下提供良好的体验。
Magnific Popup使用方法
需要包含的文件
虽然不是必需的,但我们建议把CSS文件放在
内,JS文件和初始化代码放在 之前。如果你已经导入了 jQuery.js,就不要再次包含它。当然你可以使用jQuery.noConflict();
另外,你可以选择包含Zepto.js代替jQuery。或者根据浏览器来选择加载哪一个。
初始化popup(弹出窗口)
Popup 的初始化代码应该在document(文档)ready之后执行,例如:$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
有三种方法可以调用一个popup:
1、通过一个HTML元素Open popup
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
2、通过一组有共同父元素的子元素
和之前的一样,不同的是创建一个弹出列表。注意,此方法不支持gallery(画廊)模式,它只不过减少了单击事件处理函数的数量――每个元素以独立的窗口弹出。如果你要使用gallery模式,添加gallery:{enabled:true}选项。
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
});
3、通过“items”选项
items选项为弹出项定义了一组数据,并且让Magnific Popup忽略目标DOM元素的所有属性值。items的值可以是单个对象或一个对象数组。// Example with single object
$('#some-button').magnificPopup({
items: {
src: 'path-to-image-1.jpg'
},
type: 'image' // this is default type
});
// Example with multiple objects
$('#some-button').magnificPopup({
items: [
{
src: 'path-to-image-1.jpg'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('
type: 'inline'
},
{
src: '
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is default type
});
Content Types
Magnific Popup 一般支持4种类型:image、iframe、inline和ajax。由于并不存在基于URL的自动探测机制,因此你必须手工指定它。
有两种方法可以定义content type:
1、使用type选项,例如:$('.image-link').magnificPopup({type:'image'})
2、使用 mfp-TYPE CSS 类,例如:Open image, $('.image-link').magnificPopup()
其中,第二种方法会覆盖第一种方法,因此你可以在一次调用定义多种类型的content type。
inline是默认的content type(从v0.8.4以来)。
有几种方法可以定义弹出窗口的源(例如,一张图片、一个HTML文档,一个视频页):
方法一:使用 href 属性:Open image
方法二:使用data-mfp-src属性(覆盖方法一):Open image
方法三:使用 items 选项
$.magnificPopup.open({
items: {
src: 'some-image.jpg'
},
type: 'image'
});