-1

ポップアップが機能しない - iframe タイプで、Google マップを読み込もうとしています。コードを最小限に抑えました。Firefox の Web 開発者ツールバーを使用して、リンクされた js コードが読み込まれていることを確認しましたが、リンクをクリックすると Google マップ サイトに移動するだけです。

私は何を間違っていますか？

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<title>magnificPopup</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="js/magnific-popup.css" />
</head>
<body>
    <div style="margin:50px;">
    <a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
    </div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.popup-gmaps').magnificPopup({
            disableOn: 700,
            type: 'iframe',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
           });
       });
    </script>
    <script src="js/Zeptov1.js" type="text/javascript"></script>
    <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
</body>
</html>
4

1 に答える 1

0

jQuery コア インクルードが表示されません。プラグインとコードよりも先に jQuery をロードします。

コードを次のように変更してみてください。

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
    <title>magnificPopup</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="js/magnific-popup.css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/Zeptov1.js" type="text/javascript"></script>
    <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.popup-gmaps').magnificPopup({
                disableOn: 700,
                type: 'iframe',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
             });
         });
    </script>
</head>
<body>
    <div style="margin:50px;">
    <a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
    </div>
</body>
</html>
于 2013-09-13T18:29:07.367 に答える