Question

我对js和jQuery很新，只是从模板中使用它。

我的目标是使用像视频灯箱这样的大胆弹出窗口，但我无法使其正常工作。

我试图删除我使用的其他一些库但似乎没有改变任何东西。

我在哪里弄错了？我上传了here。

<!DOCTYPE HTML>
<!--
 Overflow 1.1 by HTML5 UP
 html5up.net | @n33co
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 -->
<html>
    <head>
        <title>Overflow by HTML5 UP</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="shortcut icon" href="../favicon.ico">

            <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
            <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
            <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
            <script src="js/jquery.magnific-popup.js"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery.poptrox.min.js"></script>
            <script src="js/skel.min.js"></script>
            <script src="js/init.js"></script>
            <script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
            <script src="js/video.js"></script>
            <script> videojs.options.flash.swf = "js/video-js.swf"</script>
            <link rel="stylesheet" href="css/effets_perso.css" />
            <link rel="stylesheet" href="css/video-js.css">
            <link rel="stylesheet" href="css/perso.css">
            <link rel="stylesheet" href="css/magnific-popup.css">
            <noscript>
                <link rel="stylesheet" href="css/skel-noscript.css" />
                <link rel="stylesheet" href="css/style.css" />

            </noscript>
            <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->

            <!--[if IE]>
             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
             <![endif]-->
            </head>
<body>

        <!-- Generic -->

<article class="container box style3">
    <header>
        <h2>Generic Box</h2>
        <p>Just a generic box. Nothing to see here.</p>
    </header>
    <section>
        <header>
            <h3>Paragraph</h3>
            <p>This is a byline</p>
        </header>
        <a class="test-popup-link" href="images/pic02.jpg">Image</a>
        <script type="text/javascript">
            $(document).ready(function() {
                              $(".test-popup-link").magnificPopup({
                                                                  type: "image"
                                                                  // autres options
                                                                  });
                              });
            </script>
        <div align="center">
            <a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
            <a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
            <a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&amp;hl=en&amp;ll=46.521666,6.56652&amp;spn=0.016005,0.038581&amp;sll=37.0625,-95.677068&amp;sspn=37.683309,79.013672&amp;t=h&amp;hq=epfl&amp;z=15&amp;iwloc=A">EPFL sur Google Map</a>

<script type="text/javascript">
   $(document).ready(function() {
       $(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({                                                                                               
            disableOn: 700,
            type: "iframe",
            mainClass: "mfp-fade",
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        });
    });
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>

Answer 1

我不知道这是完整的问题，但是javascript标签的顺序肯定是问题的一部分。

<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>

正如您所看到的，在实际加载jquery库（js/jquery.magnific-popup.js）之前，您正在加载js/jquery.min.js。这是一个重要的区别，因为你的magnific-popup.js使用jquery。如果查看网页上的控制台（键入ctrl+i，并切换到控制台选项卡），您将看到几个与未加载jquery有关的错误，因此在magnific-popup.js中的函数没有被定义。

所以将你的jquery脚本移到顶部

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>

如果它仍然不起作用。查看控制台，并在编写Stack Overflow问题时尝试包含错误。

magnific-popup视频不是弹出窗口

1 个答案: