2

我正在尝试在我的网站上实现宏伟的弹出窗口，但由于某种原因，我的测试图像没有以弹出模式打开。可能是什么问题？非常感谢

<!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>
4

3 回答 3

4

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

Uncaught SyntaxError: Unexpected token < testpopup.html:14

单击错误消息，它将带您到

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

有你的问题，你有两个打开的脚本标签。

于 2013-05-09T12:25:40.510 回答
0

你应该把

(document).ready(function()

在里面body，而不是里面head

于 2013-05-20T17:13:27.930 回答
0

您的代码中的问题：

 $(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
      }
  });
});
于 2014-01-24T17:08:39.587 回答