Magnific Popup弹出层插件

Magnific Popup是一款响应式的支持手机、pc和平板的基于jQuery 1.7.2+或Zepto.js 1.0+弹出层插件，点击弹出大图，带左右轮播功能，也能弹出其他元素，如video、iframe等，底部带有分页器，可以分组，带关闭、点击遮罩关闭等功能。好用简单而且体积很小。移动端建议使用Zepto.js。 一、引入css

<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

二、引入jQuery或zepto

<script src="http://www.5imoban.net/uploads/allimg/210112/15400534X-0.jpg"></script>

三、引入js

<script src="magnific-popup/jquery.magnific-popup.js"></script>

四、弹出popup窗口
  Popup 的初始化代码应该在document（文档）ready之后执行，例如：

$(document).ready(function() {  
  $('.image-link').magnificPopup({type:'image'});  
});

  有三种方法可以调用一个popup：
1、通过一个HTML元素

<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>  
$('.test-popup-link').magnificPopup({   
  type: 'image'  
  // 其他参数
});

2、通过一组有共同父元素的子元素
  和之前的一样，不同的是创建一个弹出列表。注意，此方法不支持gallery（画廊）模式，它只不过减少了单击事件处理函数的数量――每个元素以独立的窗口弹出。如果你要使用gallery模式，添加gallery:{enabled:true}选项。

<div class="parent-container">  
  <a href="path-to-image-1.jpg">Open popup 1</a>  
  <a href="path-to-image-2.jpg">Open popup 2</a>  
  <a href="path-to-image-3.jpg">Open popup 3</a>  
</div>  
$('.parent-container').magnificPopup({  
  delegate: 'a', //子选择器，点击子选择器，弹出相应的弹窗
  type: 'image'  
  //其他选项
});

3、通过“items”选项
  items选项为弹出项定义了一组数据，并且让Magnific Popup忽略目标DOM元素的所有属性值。items的值可以是单个对象或一个对象数组。

//单个元素触发
$('#some-button').magnificPopup({  
    items: {  
      src: 'path-to-image-1.jpg'  
    },  
    type: 'image' // this is default type  
});  
   
//多个元素触发
$('#some-button').magnificPopup({  
    items: [  
      {  
        src: 'path-to-image-1.jpg'  
      },  
      {  
        src: 'http://vimeo.com/123123',  
        type: 'iframe' // this overrides default type  
      },  
      {  
        src: $('<div>Dynamically created element</div>'), // Dynamically created element  
        type: 'inline'  
      },  
      {  
        src: '<div>HTML string</div>',  
        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  
});

五、触发对象详解：
Magnific Popup 一般支持4种类型：image、iframe、inline和ajax。由于并不存在基于URL的自动探测机制，因此你必须手工指定它。

有两种方法可以定义content type：

1、使用type选项，例如：

$('.image-link').magnificPopup({type:'image'})

2、使用 mfp-TYPE CSS 类，例如：

<a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup()

其中，第二种方法会覆盖第一种方法，因此你可以在一次调用定义多种类型的content type。

inline是默认的content type（从v0.8.4以来）。

有几种方法可以定义弹出窗口的源（例如，一张图片、一个HTML文档，一个视频页）：

方法一：使用 href 属性：

<a href="image-for-popup.jpg">Open image</a>

方法二：使用data-mfp-src属性（覆盖方法一）：

<a href="some-image.jpg" data-mfp-src="image-for-popup.jpg">Open image</a>

方法三：使用 items 选项

$.magnificPopup.open({  
  items: {  
    src: 'some-image.jpg'  
  },  
  type: 'image'
});