Bootstrap 模态内的 Magnific-Popup

Question

我正在使用 Bootstrap's modal to render some content. In this content I have a video link and I'm using the jQuery plugin Magnific-Popup 打开此视频。

但是当我在我的模态中并点击视频时 link，视频在模态的背景中开始播放。我必须关闭模式才能看到它。如何让 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

尝试删除 tabindex="-1" 选项，因为该选项表示模式必须覆盖所有内容。

Answer 2

选项 1：

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

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

关闭 bootstrap 模式。

我分叉了你的 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 class 的 z-index 为 1050， .mfp-wrap class 的 z-index 为 1043，这就是模态框位于顶部的原因。

这是另一个 JSFiddle，修改为 CSS 而不是 data-dismiss。

请注意，Magnific Popup 关闭按钮不起作用。它还有一个需要更改的 z-index，可能还有其他的。 data-dismiss 选项将是最干净的，除非你绝对需要模式保持打开状态。

Bootstrap 模态内的 Magnific-Popup

Magnific-Popup inside Bootstrap modal

javascript

jquery

modal-dialog

twitter-bootstrap

magnific-popup