【推荐】Magnific Popup：一款快速、轻量级且响应式的jQuery弹窗插件

// 引入jQuery库和Magnific Popup插件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.magnific-popup.min.js"></script>
 
// 页面加载完成后初始化Magnific Popup
$(document).ready(function() {
    $('.image-link').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-with-zoom', // 定义弹窗的类名
        image: {
            verticalFit: true
        },
        zoom: {
            enabled: true,
            duration: 300 // 缩放动画持续时间
        }
    });
});
 
// HTML中使用image-link类来触发弹窗效果
<a href="path/to/image.jpg" class="image-link">查看图片</a>

这段代码演示了如何使用Magnific Popup插件来创建一个简单的图片放大弹窗效果。首先，我们需要引入jQuery库和Magnific Popup插件。然后，在文档加载完成后，我们初始化了Magnific Popup，并设置了一些参数，如图片的居中和缩放效果。最后，我们在HTML中添加了一个链接，点击后会触发弹窗。