jQuery响应式弹出层和对话框插插件magnific-popup.css

最新推荐文章于 2025-07-21 18:52:04 发布

转载最新推荐文章于 2025-07-21 18:52:04 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guanyushan/p/8001586.html

文章标签：

#javascript #ViewUI

本文介绍如何利用magnific-popup插件在网页中实现图片弹出窗口效果。首先通过引入必要的CSS和JS文件，然后使用jQuery在页面加载完成后初始化magnific-popup插件，最终达到图片点击放大显示的目的。

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

  //引入弹出层弹出框
  magnific-popup的css文件，
 

  <
  link 
  rel
  =
  "stylesheet" 
  href
  =
  "magnific-popup/magnific-popup.css"
  >   
 
//引入jquery文件

  <
  script 
  src
  =
  "http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
  ></
  script
  >    
 

  
  <!-- 引入magnific-popup的JS文件 -->  
 

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

  一、
  初始化popup（弹出窗口）
 

       在加载页面完成之后执行；
 

  　　 代码如下： 
  
          $(document).ready(
    function
    () {  //页面加载完成

   

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

           });
   