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>

以关闭引导程序模式。

我分叉了您的JSFiddle进行演示。

选项2：

如果要保持模式打开，则在[Magnific Popupcontainer]上增加z-index（2000对我有用，但底线是它必须大于模式的z索引）。

<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，这就是模态位于最上方的原因。

这里是另一个带有CSS修改的JSFiddle，而不是data-dismiss。

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

Answer 2

尝试删除tabindex =“-1”选项，因为此选项表示模态必须覆盖所有内容。