简单的Magnific弹出窗口不会触发

时间:2013-09-13 18:14:30

标签: jquery magnific-popup

弹出窗口无效 - 它是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>

1 个答案:

答案 0 :(得分: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>