Magnific Popup使用方法

最新推荐文章于 2024-08-09 07:15:08 发布

木木格里

最新推荐文章于 2024-08-09 07:15:08 发布

阅读量7.1k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36545656/article/details/53872363

版权

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用 Magnific Popup 插件实现网页上的图片、iframe 和其他内容的弹窗展示效果。包括引入必要的 CSS 和 JavaScript 文件，初始化插件，以及通过不同方式定义弹出窗口的源等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入外部文件 magnific-popup.css和 jquery.magnific-popup.js

<link rel="stylesheet" href="lib/magnific-popup.css">
    <script src="lib/jquery.js"></script>
    <script src="lib/jquery.magnific-popup.js"></script>

如果你已经导入了 jQuery.js，就不要再次包含它。当然你可以使用

jQuery.noConflict();

2、初始化poopup

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'  
        // other options  
    });

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

Content Types

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 选项

    <pre name="code" class="javascript">$.magnificPopup.open({  
      items: {  
        src: 'some-image.jpg'  
      },  
      type: 'image'  
    });</pre><br><br>