我缩放的放大模式图像没有关闭按钮

2024-05-21 • 问答

我希望使用Magnific Popup v1.1.0来允许用户放大我网页上的图像。我最初的测试似乎很积极，但是我注意到没有关闭框。

我已经下载了Magnific Popup CSS和JS，并将其放在我的当前目录中。除了没有关闭的小部件（右上角的“ x”）以外，其他所有功能似乎都可以正常工作。不会在“ esc”或“ click”上关闭。

这是我的代码（请注意，我目前正在使用Bootstrap 3.4。我的jquery是3.3.1）：

<!DOCTYPE html>
<html>
<head>
        <title>ATmega8a Dice!</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="magnific-popup.css">
</head>
<body>
            <a class="image-popup-vertical-fit" href="dice_atmega8a_Pictures/completed kit.png" title="Caption. Can be aligned to any side and contain any HTML.">
                <img src="dice_atmega8a_Pictures/completed kit.png" width="75" height="75">
            </a>

<script type="text/javascript" src="/usr/share/javascript/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="magnific-popup.js"></script>
    <script>
$(document).ready(function() {

        $('.image-popup-vertical-fit').magnificPopup({
                type: 'image',closeonContentClick: true,mainClass: 'mfp-img-mobile',image: {
                        verticalFit: true
                }

        });

        $('.image-popup-fit-width').magnificPopup({
                type: 'image',image: {
                        verticalFit: false
                }
        });

        $('.image-popup-no-margins').magnificPopup({
                type: 'image',closeBtnInside: true,fixedContentPos: true,mainClass: 'mfp-no-margins mfp-with-zoom',// class to remove default margin from left and right side
                image: {
                        verticalFit: true
                },zoom: {
                        enabled: true,duration: 300 // don't foget to change the duration also in CSS
                }
        });

});
    </script>
</body>```

$('.ajax-popup-link').magnificPopup({ type: 'ajax',removalDelay: 100,// Delay in milliseconds before popup is removed mainClass: 'my-mfp-slide-bottom',`enter code here` // Class that is added to popup wrapper and background closeOnContentClick: false,closeOnBgClick: false,showCloseBtn: true,closeBtnInside: true,fixedContentPos: true,alignTop: true,// settings: {cache:false,async:false},callbacks: { open: function () { },beforeClose: function () { this.content.addClass('light-speed-out'); },close: function () { this.content.removeClass('light-speed-out'); } },midClick: true });

我缩放的放大模式图像没有关闭按钮

qiche520 回答：我缩放的放大模式图像没有关闭按钮

大家都在问