我希望使用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',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
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>```
好的，我想我明白了。比较
http://www.schwager.com/Pages/Products/test-jquery-2.2.4.html
with
http://www.schwager.com/Pages/Products/test-rh7.6-jquery.html
单击每个图像。
[在前者中，我使用从https://code.jquery.com/jquery/下载自己的jquery。在后者中，我使用从Red Hat 7.6的软件包中安装的jquery。 jQuery版本是2.2.4，但是jquery.min.cs的大小与我下载的jquery.min.js v.2.4.2的大小不同。
test-jquery-2.2.4.html正常工作。我猜这是Red Hat的jquery版本中的错误？
似乎是一个巨大的错误弹出窗口。为了在容器内使用按钮，您必须提供fixedContentPos：true;它可能会帮助您。
$('.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
});