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：

如果你想保持模态打开然后增加z-index（2000对我起作用，但底线是它需要大于模态的z-index）在Magnific Popupcontainer上是要走的路

<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。

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

Answer 2

尝试删除tabindex =＆＃34; -1＆＃34;选项因为这个选项说模态必须超过所有的东西。

Bootstrap模态中的Magnific-Popup

2 个答案: