Bootstrap Modal 坐在背景后面

2022-01-17 00:00:00 modal-dialog css twitter-bootstrap z-index

所以我遇到的问题几乎与 @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.

相关文章