html 响应式弹层插件,jQuery响应式弹出层和对话框插插件MagnificPopup

插件描述：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: $('

Dynamically created element

'), // Dynamically created element

type: 'inline'

},

{

src: '

HTML string

',

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'

});