javascript - Bootstrap 模式内的 Magnific-Popup

Question

我正在使用Bootstrap's modal来渲染一些内容。在此内容中，我有一个视频链接，并且我正在使用 jQuery 插件 Magnific-Popup打开此视频。

但是当我在模式中并单击视频链接时，视频会在模式的背景中开始。我必须关闭模式才能看到它。如何使 Magnific-Popup 位于顶部？

我尝试更改 Magnific-Popup 的 z-index，但它已经在 1000+，所以没有效果。

基本上，我所拥有的是:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <a class="popup-youtube" href="https://www.youtube.com/watch?v=alJ8FmokHBo">Open YouTube video</a>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
    });
});
</script>

I created a JSFiddle如果需要的话可以进行演示。

Answer 1

选项 1:

将 data-dismiss="modal" 添加到您的

<a class="popup-youtube" href="https://www.youtube.com/watch?v=alJ8FmokHBo">Open YouTube video</a>

关闭 Bootstrap 模式。

我 fork 了你的JSFiddle来证明这一点。

选项 2:

如果您想保持模式打开，则增加 Magnific Popupcontainer 上的 z-index (2000 对我有用，但底线是它需要大于模式的 z-index)这是要走的路。

<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-fade mfp-ready"
    tabindex="-1" 
    style="top: 0px; position: absolute; height: 386px; z-index: 2000">
    <div class="mfp-container mfp-iframe-holder">
        <div class="mfp-content">
            <div class="mfp-iframe-scaler">
                <button class="mfp-close" type="button" title="Close (Esc)">×</button>
                <iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/alJ8FmokHBo?autoplay=1" class="mfp-iframe"></iframe>
            </div>
        </div>
    </div>
</div>

编辑:我刚刚检查过，.modal BootStrap 类的 z-index 为 1050，.mfp- wrap 类的 z-index 为 1043，这就是模态框位于顶部的原因。

这是另一个 JSFiddle使用 CSS 修改而不是 data-dismiss。

请注意，放大弹出窗口关闭按钮不起作用。它还具有需要更改的 z 索引，并且可能还有其他索引。 data-dismiss 选项将是最干净的，除非您绝对需要模式保持打开状态。