javascript 弹出窗口不显示（带有放大弹出窗口）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16461715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pop-up not showing (with magnific-popup)
提问by Greg
I'm trying to implement magnific popupon my website but for some reason my test image is not opening in popup mode. What could be the issue? Many thanks
我正在尝试在我的网站上实现magnific popup，但由于某种原因，我的测试图像没有在弹出模式下打开。可能是什么问题？非常感谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<!-- Scripts -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" /></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
回答by epascarello
Look at the JavaScript console. You got an error.
查看 JavaScript 控制台。你有一个错误。
Uncaught SyntaxError: Unexpected token < testpopup.html:14
Click on the error message and it takes you to
单击错误消息，它会将您带到
<script type="text/javascript">
<script type="text/javascript">
There is your problem, you have two opening script tags.
这是你的问题，你有两个打开的脚本标签。
回答by MayMayoO
you should put
你应该把
(document).ready(function()
inside the body, not the head
里面body，不是head
回答by ed lovejoy
Problem in your code:
您的代码中的问题：
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
Your problem, you have two opening script tags: });
你的问题，你有两个打开脚本标签： });
The proper version of script:
正确的脚本版本：
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
