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