📜  如何使用 Magnific Popup jQuery 插件?

📅  最后修改于: 2021-08-30 09:52:14             🧑  作者: Mango

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


  

  
    
    

  

    
    
    
    
  
    
    
  
    
    
  
    

  


html


  

  
    
    
  
    
    

  

    

        :GALLERY:     

         
             
                                         


输出:

  • 点击按钮前:

点击按钮前

  • 点击按钮后:

点击按钮后

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

html



  

  
    
    
  
    
    

  

    

        :GALLERY:     

         
             
                                         

输出:

  • 单击图像之前:

  • 点击任意图片后:

参考: Magnific Popup 文档