Bootstrap Modal 坐在背景后面-前端问题

Bootstrap Modal sitting behind backdrop(Bootstrap Modal 坐在背景后面)

本文介绍了Bootstrap Modal 坐在背景后面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我遇到的问题几乎与 @Jamescoo 是，但我认为我的问题在于我已经定位了几个 DIV 来创建一个滑动导航面板.

这是我复制的确切设置:http://jsfiddle.net/ZBQ8U/2/

奖励:如果您愿意，请随意获取滑动面板的代码 :)

z-indexes 不应该冲突，它们的值会显示它们正确堆叠，但在视觉上它们不是.

单击打开模态"按钮后，<div class="modal-backdrop fade in"></div> 将覆盖所有内容！(您必须重新运行代码才能重置它)

我不知道如何解决这个问题...有什么想法吗?

解决方案

只需将整个模式移到代码的其余部分之外，到最底部.它不需要嵌套在除主体之外的任何其他元素中.

<!-- 所有其他 HTML -->...</div><!-- 模态--><div class="模态淡入淡出" id="myModal">...</div></身体>

演示

他们在文档中暗示了这个解决方案.

<块引用>

模态标记放置
始终尝试将 modal 的 HTML 代码放在文档的顶级位置以避免其他组件影响模态框的外观和/或功能.

So I'm having nearly the exact same problem as @Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.

Here's my exact setup replicated: http://jsfiddle.net/ZBQ8U/2/

BONUS: Feel free to grab the code for the sliding panel if you'd like :)

The z-indexes shouldn't conflict and their values would show that they are stacking correctly, but visually they are not.

Once you click the 'Open Modal' button the <div class="modal-backdrop fade in"></div> covers everything! (you'll have to re-run the code to reset it)

I don't know quite how to remedy this one...Any ideas?

解决方案

Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

They hint at this solution in the documentation.

Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

这篇关于Bootstrap Modal 坐在背景后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！