Question

所以我遇到与@Jamescoo几乎完全相同的问题，但我认为我的问题来自于我已经定位了几个DIV以创建滑动导航面板。

奖励：如果您愿意，可以随意获取滑动面板的代码：）

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

点击“打开模态”按钮后，<div class="modal-backdrop fade in"></div>涵盖了所有内容！（你必须重新运行代码才能重置它）

我不知道如何补救这个...有什么想法吗？

Answer 1

将整个模式移到代码的其余部分之外，直到最底部。除了正文之外，它不需要嵌套在任何其他元素中。

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

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

Demo

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

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

Answer 2

虽然.modal的z-index高于.modal-backdrop的z-index，但.modal位于具有较低z-index的父div #content-wrap中比.modal-backdrop（z-index：1002 vs z-index：1030）。

因为父级的z索引低于.modal-backdrop，所以其中的所有内容都将位于模态之后，而不考虑给予孩子的任何z索引。

如果您删除z-index以及body div#fullContainer #content-wrap上设置的#ctrlNavPanel，则一切似乎都正常。

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

注意：我认为您最初可能在＃content-wrap和#ctrlNavPanel上使用z-index来确保导航器位于后面，但这不是必需的，因为nav元素位于HTML中的内容包装之前，所以你只需要定位它们，而不是明确设置堆叠顺序。

修改随着Schmalzy的加入，链接不再可点击。这是因为整个容器是100％宽，因此涵盖了导航。解决此问题的最快方法是将导航放在div中：

<div id="fullContainer"> <aside id="ctrlNavPanel"> <ul class="nav-link-list"> <li><label>Menu</label></li> <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li> <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li> <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li> </ul> </aside> <div id="content-wrap"> ... </div> </div>

DEMO HERE

Answer 3

就我而言，我可以通过为.modal-backdrop

添加css来解决这个问题

.modal-backdrop {
  z-index: -1;
}

虽然这样可行，但表单控件似乎仍然出现在背景上方，单击任意位置会解除模式，但它看起来并不好。

对我来说更好的解决方法是绑定到显示的事件（加载页面后）并更正z-index属性。

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

在这种情况下，如果你可以在显示的模态上更改DOM：

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

Answer 4

这些答案对我来说都不是很好。问题似乎在于模态窗口需要在身体外部。这不是最好的

所以这段代码完全完成了这项工作：

＆＃13;

$('.modal ').insertAfter($('body'));

＆＃13;

$('#product_' + product_id + ' .modal ').insertAfter($('body'));

Answer 5

在我的情况下，我的一个模态的父母是动画的，并且有这个

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

此处的拦截器为animation-fill-mode: both;。我不能只将modal移到外面，所以解决办法是将'animation-fill-mode'覆盖到animation-fill-mode: none;。动画仍然很好。

Answer 6

我有几天在同一个问题上打架......我找到了三个可行的解决方案，但我不知道，哪个是最优的，如果有人告诉我，我将不胜感激。

修改将在bootstrap.css

中

选项1：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

选项2：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

选项3：

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

我使用了选项2。

Answer 7

尝试删除背景，如果你真的不需要它（data-backdrop =＆＃34; false＆＃34;）：

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>

Answer 8

此问题的另一个解决方案是，如果您不想修改bootstrap.css，请在bootstrap-dialog.css文件中将z-index: 0;添加到.modal-backdrop类。

Answer 9

我知道已经晚了，我遇到了同样的问题，但我不得不如下破解它；

 .modal-backdrop {
      /* bug fix - no overlay */    
      display: none;    
}

.modal{
    /* bug fix - custom overlay */   
    background-color: rgba(10,10,10,0.45);
}

Answer 10

我很谨慎地将模式内容移到其原始上下文之外：其他JS或样式可能取决于该上下文。

但是，我怀疑是否有任何脚本或样式需要背景的特定上下文。

所以我的解决方案是将背景移到模态内容附近，并强制其进入相同的堆叠上下文：

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

与jacoswarts'solution仅有一点偏差，因此感谢您的启发！

Answer 11

如果我们不能删除背景和/或我们有组件框架这样的角度或vue我们不能将模态移动到根。我做了这个把戏：把我的自定义模态背景容器（带有aditional类）作为模态对话框容器的兄弟，并添加了一些css

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

和css

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}

Answer 12

对于那些使用 ASP.NET MVC ，

的人

需要在</body>标记之前移动模式div，但由于您使用的是布局页面而无法执行此操作

在正文标记之前的_Layout.cshtml文件中定义一个部分，例如：

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

然后在你看来

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

这样，模态HTML将在body标签之前呈现，现在模式应该正确显示..

Answer 13

如果您嵌套了模态，这就是线索：

$('body').on('shown.bs.modal', '.modal', function (e) {
    e.stopPropagation();
    $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

Answer 14

对于不允许您只移动 html/css 的框架的情况。

将模态附加到正文的末尾

$("#EditModal").modal("show");
$("#EditModal").appendTo("body");

并用

销毁

$("#EditModal").remove();

更多信息：https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

Answer 15

只需删除背景，然后将此代码插入您的css文件

.modal-backdrop {
      /* bug fix - no overlay */    
      display: none;    
}

Answer 16

我想了解这个问题，在调查了我的css之后，主要的容器（身体的直接孩子）有了：

position: relative
z-index: 1

我删除了这两个属性后，背景效果很好。如果主包装器具有position: fixed

，您可能还会遇到此问题

Answer 17

这适合我。

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $('#modalDecision');
    // also taken from bootstrap 3 docs
    $(element).on('shown.bs.modal', function (e) {
        // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
        var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
        $(element).append($(backDrop));
    });

Answer 18

如果你使用JQuery，你可以使用appendTo（）将模态附加到特定元素，在这种情况下，在大多数情况下，简单的一行可以将你的模态移动到背景的顶部，无论你在哪里模态div的位置

$("#myModal").appendTo("body");

这里是JQuery appendTo函数的引用： http://api.jquery.com/appendto/

我把它更新到你的小提琴 http://jsfiddle.net/ZBQ8U/240/

Answer 19

除了这里的所有答案，我发现，bootstrap4＆＃34;动画fadeIn＆＃34;也导致了这个错误（背景后面没有可点击的模态）：

检查你的模态是否在以下父标签中（引导动画）

<div class="animated fadeIn"></div>

我删除了这个标签 - 为我解决了这个问题。

Answer 20

首先确保模态不在任何父div中。然后加 $（ '＃myModal'）。appendTo（ “正文”）

它对我来说很好。

Answer 21

我遇到了一个类似的问题，即淡入淡出功能不起作用，并且覆盖层停留在页面上。我将动态内容添加回页面（仅在模态操作上刷新某些内容）。我也有这个$（'＃rejectModal - '+ itemId）.modal（'hide'）（itemId是单个页面中多个模态的动态id，用于拒绝某些信息）但问题仍然没有消失。

叠加层停留是因为我的布局在局部视图中未设置为null 设置完成后，问题就消失了：

can0 02001600 [2] 00 00 can0 07001600 [2] 00 00 can0 11001600 [2] 5C A7

Answer 22

只需将你的模态移到所有div内容之外，大部分在关闭身体之前放置。

Answer 23

很多时候，你无法将模态移到外面，因为这会影响你的设计结构。

背景高于你的模态的原因是父母有任何位置设置的id。

一个非常简单的方法来解决问题，然后移动你的模态外面是移动背景内部结构你有你的模态。在你的情况下，它可能是

$(".modal-backdrop").appendTo("main");

请注意，如果您的应用程序具有明确的结构，并且您无法将模式移到外部，因为它将违背设计结构，则此解决方案适用

Answer 24

将此代码放在任何您想要的地方

AsyncTask

Answer 25

如果您不能将模态放到根目录中（例如，如果使用角度和模态在控制器中），修改引导程序或使用 js 是显然是糟糕解决方案。

所以说你有自己的网站结构：

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

打开代码检查器并将模式移动到根目录，它应该正常工作（但没有你想要的地方）：

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

现在把它放在第一个div中并检查它是否正常工作：如果是，请检查下一个孩子，直到它不能正常工作并找到问题所在的div;

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

一旦你知道哪个div是问题，你可以使用css显示和位置来使它工作。

每个人都有不同的结构，但在我的情况下，设置父display: table;是解决方案

Answer 26

我发现在bootstrap之后应用离子框架（ionic.min.cs）来解决这个问题。

Answer 27

由于我没有机会移动模态标记，因为我将其添加到条件中的部分模板中，对我有用的是添加CSS bellow

.modal.fade {
    display: none;
}

然后，当boostrap通过js添加类“in”时，应用display：block，一切正常。

Answer 28

我错过了关注html

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

添加它并且没有问题地工作

Answer 29

删除z-index: 1040;

来自此文件bootstrap.css类.modal-backdrop

坐在背景后面的Bootstrap Modal

29 个答案: