2

Web サイトに壮大なポップアップを実装しようとしていますが、何らかの理由でテスト イメージがポップアップ モードで開かれません。問題は何ですか？どうもありがとう

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

あなたの問題があります.2つの開始スクリプトタグがあります.

于 2013-05-09T12:25:40.510 に答える
0

コードの問題:

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

あなたの問題、あなたは2つの開始スクリプトタグを持っています:});

スクリプトの適切なバージョン:

$(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 に答える
0

あなたは置くべきです

(document).ready(function()

bodyではなく の内部head

于 2013-05-20T17:13:27.930 に答える