坐在背景后的 Bootstrap Modal

小开

尽管 .modal的 z 指数高于 .modal-backdrop的 z 指数，但是 .modal处于比 .modal-backdrop具有更低 z 指数的父 div #content-wrap中(z 指数: 1002 vs z 指数: 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-wraps 和 # ctrlNavPanel 上使用了 z-index 来确保导航位于后面，但是这没有必要，因为导航元素位于 HTML 的 content-wraps 之前，所以您只需要定位它们，而不需要显式地设置堆叠顺序。

剪辑 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>

这里是示范

小开

最佳答案

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

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


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

演示

它们在文档中提示了这个解决方案。

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

小开

在我的例子中，我可以通过为 .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);
});

小开

只需移除 z-index: 1040;

从这个文件 bootstrap.css类 .modal-backdrop

小开

此问题的另一种解决方案是将 z-index: 0;添加到。引导对话框中的模式背景类。如果不想修改 bootstrap.css，请使用 css 文件。

小开

我错过了超文本标记语言

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

添加了它，工作没有问题

小开

有些日子我也在为同样的问题而奋斗... ... 我找到了三种可能的解决方案，但我不知道，哪一种是最好的，如果有人告诉我，我会很感激的。

修改将在 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。

小开

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

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

这里的阻断剂是 animation-fill-mode: both;。我不能只是移动模式外，所以解决方案是覆盖“动画填充模式”到 animation-fill-mode: none;。动画效果还是很好。

小开

因为我没有机会移动模态标记，因为我添加了它在一个条件的部分模板，什么工作为我是添加 CSS 下面

.modal.fade {
display: none;
}

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

小开

所有的答案对我来说都不够好。问题似乎出现在模态窗口需要在车身之外的地方，这并不是最好的

这段代码完美地完成了任务:

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

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

小开

我发现应用离子框架(ionic.min.cs)后，引导过程为我这个问题。

小开

如果你不能把模态放到根(例如，如果你使用角度和模态是在一个控制器) ，修改引导或使用 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;是解决方案

小开

把这个代码放在你想放的地方

$('.modal').on('shown.bs.modal', function () {
var max_index = null;
$('.modal.fade.in').not($(this)).each(function (index , value){
if(max_index< parseInt( $(this).css("z-index")))
max_index = parseInt( $(this).css("z-index"));
});
if (max_index != null) $(this).css("z-index", max_index + 1);
});

小开

尝试删除背景，如果你不真正需要它 (data-backdrop= "false"):

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

小开

很多时候，您不能将模式移到外部，因为这会影响您的设计结构。

背景出现在你的模态之上的原因是父母有任何的位置设置。

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

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

注意，这个解决方案是适用的，如果你有一个明确的结构为您的应用程序，你不能只是移动模式外部，因为它将违背设计结构

小开

只是移动你的模态在所有的 div 内容之外，放置它大部分在关闭主体之前。

小开

如果我们不能删除背景和/或我们有组件框架这样的角度或价值，我们不能移动模态的根。我做了这个技巧: 把我自定义的模态背景容器(带有附加类)作为模态对话框容器的兄弟，并添加了一些 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}

小开

你可以用这个:

<div
class="modal fade stick-up disable-scroll"
id="filtersModal"
tabindex="-1"
role="dialog"
aria-labelledby="filtersModal"
aria-hidden="false"
style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>


Adding style="" and data-backdrop false would fix it.

小开

对于那些使用 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 标记之前呈现，模态现在应该正确显示。

小开

我有一个类似的问题，褪色不工作和覆盖留在页面上。我有动态内容添加回页面(刷新一些内容只在模态动作)。我还有这个 $(’# rejectModal-’+ itemId)。Mode (‘ hide’)(itemId 是单个页面中多个 modals 的动态 id，用于拒绝某些信息) ，但问题仍然没有解决。

覆盖保留下来是因为我的布局在部分视图中没有设置为 null 设置完成后，问题就解决了:

@{
Layout = null;
}

小开

首先确保模态不在任何父 div 中。然后加上 $(’# myModal’) . 阑尾(“ body”)

我觉得挺好的。

小开

除了这里的所有答案，我发现 bootstrap4的“动画淡入”也导致了这个错误(背景后不能点击模式) :

检查您的模态是否在下面的父标记(引导动画)

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

我把这个标签拿掉了，为我解决了问题。

小开

如果你使用 JQuery，你可以使用阑尾到()将模态附加到一个特定的元素，在这种情况下，在大多数情况下，一个简单的一行可以将你的模态移动到背景的顶部，而不管你的模态 div 的位置在哪里

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

下面是 JQuery 附录函数的引用: Http://api.jquery.com/appendto/

我更新到你的小提琴上了 Http://jsfiddle.net/zbq8u/240/

小开

这对我有用。

<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));
});

小开

我遇到了这个问题，在调查了我的 css 之后，主容器(body 的直接子容器)有:

position: relative
z-index: 1

我把那两处房产搬走后，背景效果很好。如果主包装器具有 position: fixed，您也可能会遇到这个问题

小开

我对将模态内容移出其原始上下文持谨慎态度: 其他 JS 或样式可能依赖于该上下文。

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

因此，我的解决方案是将背景移动到与模态内容相邻的位置，强迫它进入相同的堆叠上下文:

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

它只是略微偏离 Jacoswarts’解决方案，所以感谢您的灵感！

小开

只要删除背景，插入这个代码在您的 css 文件

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

小开

如果你有嵌套的情态动词，这就是线索:

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

小开

我知道现在已经很晚了，我也遇到了同样的问题，但是我必须像下面这样解决它;

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


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

小开

对于那些不允许你移动 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

小开

如果[ . mode ]元素的任何祖先具有 CSS 属性 z-index集，则问题仍然存在。 [ . mode ]元素从容器元素继承 CSS z-index。而[ . modal- 背景]是从 jQuery代码动态插入到[ body ]元素中的，jQuery代码具有来自 bootstrap.css的默认 z-index: 1040。

我提出了双向 CSS 解决方案，比改变任何其他行为的默认事件和元素都要好。

设置[的父元素的 z-index: 1041或更高值。] ，祖先元素导致了[。在[。模式背景]。

或者

为[设置 z-index: 1039或更低的值。模态背景]在 CSS 文件，如果可用。因为 HTML [。模态背景]在您的代码中不可用。

[注意: CSS z-index属性可能需要使用 !important标志]

[注意: 默认的 z-index: 1040是完全依赖于 bootstrap.css]