Question

我试图在我的网站上使用Magnific Popup插件，但我似乎无法初始化它。我已经添加了必要的标记类，CSS，初始化代码，并引用了JS和CSS文件，但没有运气。

在我的网站中，我没有再次调用jQuery，因为它包含在Bootstrap中。我的浏览器控制台显示Uncaught TypeError: $(...).magnificPopup is not a function。

代码：

<div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4 col-sm-6">
                <a href="#test-popup" class="portfolio-box open-popup-link">
                    <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-name">
                                Title
                            </div>
                            <div class="project-category text-faded">
                                Click to View
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div id="test-popup" class="white-popup mfp-hide">
                Popup content
            </div>
        </div>
</div>

<script>
$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true
});
</script>

小提琴：http://jsfiddle.net/mw6ahLzz/1/

非常感谢任何帮助！

Answer 1

您必须在任何Js库之前初始化jQuery库，

所以

首先是jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后出现了大胆的弹出库

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/magnific-popup.css">
<script src="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/jquery.magnific-popup.min.js"></script>

初始化弹出式脚本并使其为Dom-ready

$(document).ready(function() {
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true
    });
});

HTML

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-lg-4 col-sm-6">
            <a href="#test-popup" class="portfolio-box open-popup-link">
                <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-name">
                            Title
                        </div>
                        <div class="project-category text-faded">
                            Click to View
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div id="test-popup" class="white-popup mfp-hide">
            Popup content
        </div>
    </div>
</div>

Fiddle

无法初始化Magnific Popup LIghtbox

1 个答案: