弹出窗口未显示（带有放大弹出窗口）答案

【问题标题】：Pop-up not showing (with magnific-popup)弹出窗口未显示（带有放大弹出窗口）
【发布时间】：2013-05-09 12:24:10
【问题描述】：

我正在尝试在我的网站上实现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>

【问题讨论】：

标签： javascript jquery html magnific-popup

【解决方案1】：

查看 JavaScript 控制台。你有一个错误。

Uncaught SyntaxError: Unexpected token < testpopup.html:14

点击错误信息，它会带你去

<script type="text/javascript">
<script type="text/javascript">

这是你的问题，你有两个开始的脚本标签。

【讨论】：

【解决方案2】：

你应该放

(document).ready(function()

在body 内，而不是head

【讨论】：

为什么 OP 应该这样做？

【解决方案3】：

代码中的问题：

 $(document).ready(function() {
    $('.image-popup-vertical-fit').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      mainClass: 'mfp-img-mobile',
      image: {
        verticalFit: true
      }
 });

你的问题，你有两个开始脚本标签：});

脚本的正确版本：

$(document).ready(function() {
    $('.image-popup-vertical-fit').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      mainClass: 'mfp-img-mobile',
      image: {
        verticalFit: true
      }
  });
});

【讨论】：