在模态背景下显示的 Bootstrap 模态对话框

Question

I've repeatedly run into the following problem with Bootstrap's modal dialog where the dialog ends up showing underneath the modal background.我在 Bootstrap 的模态对话框中反复遇到以下问题，其中对话框最终显示在模态背景下方。

Just like this:像这样：

Answer 1

Caused by positioning定位导致

The problem is that many modern applications use fixed, absolute and relative positioning to layout their user interface.问题是许多现代应用程序使用固定、绝对和相对定位来布局其用户界面。 The above problem occurs when the Modal dialog sits within a container that has any parent that uses either fixed, absolute or relative positioning.当模态对话框位于具有使用固定、绝对或相对定位的任何父级的容器中时，会发生上述问题。 The change post 3.34 of bootstrap was that the modal overlay was moved to the DOM root below while the actual modal dialog content in this case is sitting inside of a separate nested DOM structure. bootstrap 3.34 的更改是模态覆盖被移动到下面的 DOM 根，而在这种情况下，实际的模态对话框内容位于单独的嵌套 DOM 结构内。

<body>
    <div>
        <div style="position: absolute">
            ... other content
            <div class="modal">
                ... modal dialog here
            </div>
         <div>
     <div>
    
   <div class="modal-overlay"></div>
</body>

The problem occurs because the overlay and the other content container are not relative to each other so the position:absolute (or fixed) and their z-index values are not directly related to each other.出现问题是因为叠加层和其他内容容器彼此不相关，因此 position:absolute （或固定）及其 z-index 值彼此没有直接关系。

The easiest solution is to move the modal dialog outside of any container and just declare it under the element, or - remove any absolute, fixed or relative positioning.最简单的解决方案是将模态对话框移到任何容器之外，并在元素下声明它，或者 - 删除任何绝对、固定或相对定位。

See details about it in this blog post 在这篇博文中查看有关它的详细信息

在模态背景下显示的 Bootstrap 模态对话框

问题描述

1 个解决方案

解决方案1
0 2021-10-13 05:39:19

在模态背景下显示的 Bootstrap 模态对话框

问题描述

1 个解决方案

解决方案1 0 2021-10-13 05:39:19

解决方案1
0 2021-10-13 05:39:19