响应式弹出层和对话框组件MagnificPopup

简介

Magnific Popup 是一个响应式弹出层和对话框组件,专注于性能,为用户在各种平台下提供良好的体验。

使用

1.  引入文件

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

2.  用法示例

有三种方法可以调用一个popup：

1. 通过一个HTML元素

<a class="test-popup-link" href="path-to-image.jpg">
  Open popup
</a>

<script>
  $('.test-popup-link').magnificPopup({
    type: 'image'
    // other options
  });
</script>

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>

<script>
  $('.parent-container').magnificPopup({
    delegate: 'a',
    // child items selector, by clicking on it popup will open
    type: 'image'
    // other options
  });
</script>

3. 通过“items”选项

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

<script>
  // 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: $('<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
  });
</script>

3.  注意事项

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>

<script>$('.image-link').magnificPopup()</script>

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

相关链接

官网地址 ：  https://dimsemenov.com/plugins/magnific-popup/

GitHub 地址 ：  https://github.com/dimsemenov/Magnific-Popup