如何使用 Magnific Popup jQuery 插件？

Magnific Popup 是一个快速、轻便、移动友好且响应迅速的灯箱和模态对话框 jQuery 插件。它可用于打开内联 HTML、ajax 加载的内容、图像、表单、iframe(YouTube 视频、Vimeo、谷歌地图)和照片库。它使用 CSS3 过渡添加了动画效果。

安装过程：有几种方法可以开始使用这个插件：

• 从这里下载最新版本的 Magnific Popup 的压缩文件夹。
• 或者，通过在 Git Bash 中执行以下命令，将 Github 存储库克隆到任何所需位置。

  git clone https://github.com/dimsemenov/Magnific-Popup.git

• 由于Magnific是jQuery框架的插件，所以需要引用jQuery库。这可以通过使用 Google 托管的 jQuery 版本或下载和使用分发文件来完成。
• 包含 CSS：从 Magnific 的 dist 文件夹中添加magnific-popup.css 文件。

• 包含 JavaScript：从 Magnific 的 dist 文件夹中添加jquery.magnific-popup.min.js 文件。

示例 1：此示例显示使用插件的弹出窗口。

html

  

  
    
    

  

    
    
        
            Click to Open PopUp
        
    
    
    
  
        
            GEEKSFORGEEKS
        
  
        
            WELCOME TO GEEKSFORGEEKS
        
    
  
    
    
    
  
    
    
    
  
    
  
        $(document).ready(function ($) {
            $('.open-popup').magnificPopup({
                type: 'inline',
  
                // Fixed position will be used
                fixContentPos: true,
  
                // Since disabled, Magnific Popup
                // will not put close button
                // inside content of popup
                closeBtnInside: false,
                preloader: false,
  
                // Delay in milliseconds before
                // popup is removed
                removalDelay: 160,
  
                // Class that is added to
                // popup wrapper and background
                mainClass: 'mfp-fade'
            });
        });
    

  

输出：

• 点击按钮前：

• 点击按钮后：

示例 2：此示例显示了使用插件的带有图像的弹出窗口。画廊模块允许我们切换弹出窗口的内容并添加导航箭头。

html

  

  
    
    
  
    
    

  

    
        :GALLERY:
    
    
    
        
  
            
            
                
                    
                
            
            
            
                
                    
                
            
            
            
                
                    
                
            
            
            
                
                    
                
            
        
    
  
    
    
    
    
    
    
    
  
    
    
    
  

        $(document).ready(function ($) {
            $('.gallery').magnificPopup({
                type: 'image',
  
                // To invoke the popup
                // using the 'a' tag
                delegate: 'a',
  
                // Enable the gallery
                gallery: {
                    enabled: true
                }
            });
        });
    

  

输出：

• 单击图像之前：

  

• 点击任意图片后：

  

参考： Magnific Popup 文档