Bootstrap莫代尔坐在背后
所以我几乎和@Jamescoo的问题一样，但是我认为我的问题来自于我已经定位了几个DIV来创build滑动导航面板。
这是我的确切设置复制： http : //jsfiddle.net/ZBQ8U/2/
奖金：如果你愿意的话，随意抓取滑动面板的代码:)
z-索引不应该冲突，它们的值将显示它们正确堆叠，但是在视觉上它们不是。
一旦你点击“打开模式”button， <div class="modal-backdrop fade in"></div>覆盖所有内容！ （你将不得不重新运行代码来重置它）
我不知道如何补救这个…任何想法？
只需将整个模式移到代码的其余部分，直到最底层。 除了body之外，它不需要嵌套在其他任何元素中。
<body> <!-- All other HTML --> <div> ... </div> <!-- Modal --> <div class="modal fade" id="myModal"> ... </div> </body>
演示
他们在文档中暗示了这个解决scheme。
模态标记布局
总是尝试将模式的HTML代码置于文档的顶层位置，以避免影响模式外观和/或function的其他组件。
尽pipe.modal的z-index高于.modal-backdrop ，那么.modal在父div #content-wrap ，它具有比.modal-backdrop更低的z-index（z-index：1002 vs z-index：1030）。
因为父母的Z指数低于.modal-backdrop所有的内容都将落后于模态，而不pipe给予孩子的任何Z指数。
如果你删除了在body div#fullContainer #content-wrap和body div#fullContainer #content-wrap上设置的z-index那么一切似乎都可以正常工作。
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位于后面，但这不是必须的，因为nav元素在HTML中的content-wrap之前，所以你只能需要定位它们，而不是明确地设置堆叠顺序。
编辑施马尔齐拿起来，链接不再可点击。 这是因为整个容器是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>
在这里演示
就我而言，我可以通过为.modal-backdrop添加css来修复它
.modal-backdrop { z-index: -1; }
虽然这个工作，forms控制似乎仍然出现在背景之上，点击任何地方disminses模式，但它看起来不是很好。
对我来说更好的解决方法是绑定到显示的事件（一旦加载页面）并更正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); });
没有任何答案对我来说足够好。 问题出现在模态窗口需要在身体之外的地方，而这不是最好的
所以这个代码完成了这个工作：
$('.modal ').insertAfter($('body'));
我在几天的时间里也遇到了同样的问题…我发现了三个可能的解决scheme，但是我不知道哪一个是最优的，如果有人告诉我，我将不胜感激。
修改将在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。
在我的情况下，我的模式的父母之一是animation和有这个
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 100; }
这里的拦截器是animation-fill-mode: both; 。 我不能只在外面移动模式，所以解决scheme是将“animation-fill-mode”覆盖为animation-fill-mode: none; 。 animation仍然工作正常。
这个问题的另一个解决方法是添加z-index: 0; 如果您不想修改bootstrap.css文件，则在您的bootstrap-dialog.css文件中指向.modal-backdrop类。
尝试删除背景，如果你不真的需要它（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>
如果我们不能删除背景和/或我们有组件框架这样的angular度或vue我们不能移动模式到根。 我做了这个把戏：把我的自定义模态背景容器（与aditional类）作为modal dialog容器的兄弟和添加一些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.
只要删除z-index: 1040 ;
从这个文件bootstrap.css类.modal-backdrop
我错过了下面的HTML
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
添加它，并没有问题的工作
由于我没有机会移动模式标记，因为我添加它在一个有条件的部分模板是什么为我工作是添加CSS波纹pipe
.modal.fade { display: none; }
然后，当boostrap通过js添加类“in”应用display：block并且一切正常。
我发现应用ionic framework（ionic.min.cs）引导后为我解决这个问题。
如果你不能把模式放到根目录（如果你使用angular度和模态在控制器中）， 修改 bootstrap或使用js显然是一个不好的解决scheme。
所以说你有你的网站结构：
//not working <div> <div> <div> <modal></modal> </div> </div> </div>
打开你的代码检查器，并将模态移动到根，它应该工作（但没有你想要的地方）：
//should be working <div> <div> <div> </div> </div> </div> <modal></modal>
现在把它放在第一个div，检查它是否正常工作：如果是，请检查下一个孩子，直到它不工作，find问题的div;
//should be working <div> <div> <div> </div> </div> <modal></modal> </div>
一旦你知道哪个div是你的问题，你可以用CSS的显示和位置来使其工作。
每个人都有不同的结构，但在我的情况下，设置父级display: table; 是解决scheme
把这个代码放在任何你想要的地方
$('.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); });
很多时候，你不能将模态移到外面，因为这会影响你的devise结构。
背景出现在你的模式之上的原因是id父母有任何位置设置。
一个非常简单的方法来解决问题，然后移动你的模态外面是移动内部结构的背景下，你有你的模态。 就你而言，可能是
$(".modal-backdrop").appendTo("main");
请注意，如果您对应用程序有明确的结构，那么此解决scheme是适用的，并且您不能将模态外移，因为它违背了devise结构
只是把你的模态移到所有的div内容之外，大部分是在closuresbody之前。
对于那些使用ASP.NET MVC的人来说 ，
需要在</body>标签之前移动模态div，但是因为您正在使用布局页面而无法执行该模式
在你的_Layout.cshtml文件中，在body标签之前定义一个section，例如：
... 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标签和模态现在应该正确显示之前被渲染。
我有一个类似的问题，淡出不起作用，覆盖停留在页面上。 我将dynamic内容添加回页面（仅在模式操作中刷新某些内容）。 我也有这个$（'＃rejectModal – '+ itemId）.modal（'hide'）（itemId是多个模态的单个页面中的dynamicID，用于拒绝某些信息），但问题仍然没有消失。
覆盖停留，因为我的布局没有在部分视图中设置为空设置这个问题后，没有了：
@{ Layout = null; }
首先确保模态不在任何父div中。 然后添加$（'＃myModal'）。appendTo（“body”）
它为我工作得很好。
除了这里的所有答案，我发现，bootstrap4“animationfadeIn”也造成这个错误（不能点击模式背后）：
检查你的模态是否在下面的父标签（引导animation）
<div class="animated fadeIn"></div>
我删除了这个标签 – 为我解决了这个问题。
如果使用JQuery，可以使用appendTo（）将模式附加到特定的元素，在这种情况下，大多数情况下，简单的一行可以将模态移动到背景的顶部，而不pipe模态div的位置
$("#myModal").appendTo("body");
这里是JQuery appendTo函数的参考： 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)); });
