CSS 坐在背景后面的 Bootstrap Modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20983110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal sitting behind backdrop
提问by WizzyBoom
So I'm having nearly the exact same problem as @Jamescoowas but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.
所以我遇到了与@Jamescoo 几乎完全相同的问题，但我认为我的问题来自这样一个事实，即我已经放置了几个 DIV 来创建一个滑动导航面板。
Here's my exact setup replicated: http://jsfiddle.net/ZBQ8U/2/
这是我复制的确切设置：http: //jsfiddle.net/ZBQ8U/2/
BONUS: Feel free to grab the code for the sliding panel if you'd like :)
奖励：如果您愿意，请随意获取滑动面板的代码:)
The z-indexes shouldn't conflict and their values would show that they are stacking correctly, but visually they are not.
z-indexes 不应该冲突，它们的值会表明它们堆叠正确，但在视觉上它们不是。
Once you click the 'Open Modal' button the <div class="modal-backdrop fade in"></div>covers everything! (you'll have to re-run the code to reset it)
单击“打开模态”按钮后，<div class="modal-backdrop fade in"></div>所有内容都将覆盖！（您必须重新运行代码才能重置它）
I don't know quite how to remedy this one...Any ideas?
我不知道如何解决这个问题......有什么想法吗？
回答by Schmalzy
Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.
只需将整个模态移到其余代码之外，到最底部。除了主体之外，它不需要嵌套在任何其他元素中。
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
They hint at this solution in the documentation.
他们在文档中暗示了这个解决方案。
Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
模态标记放置
始终尝试将模态的 HTML 代码放置在文档的顶级位置，以避免其他组件影响模态的外观和/或功能。
回答by davidpauljunior
Although the z-index of the .modalis higher than that of the .modal-backdrop, that .modalis in a parent div #content-wrapwhich has a lower z-index than .modal-backdrop(z-index: 1002 vs z-index: 1030).
尽管所z-索引.modal比的更高.modal-backdrop，这.modal是在父DIV#content-wrap其具有较低的z索引比.modal-backdrop（z索引：1002 VS的z-index：1030）。
Because the parent has lower z-index than the .modal-backdropeverything in it will be behind the modal, irrespective of any z-index given to the children.
因为父级的 z-index 比.modal-backdrop它里面的所有东西都低，所以不管给了孩子什么 z-index。
If you remove the z-indexyou have set on both the body div#fullContainer #content-wrapand also on the #ctrlNavPanel, everything seems to work ok.
如果您删除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;
}
NOTE: I think that you may have initially used z-indexes on the #content-wrap and #ctrlNavPanel to ensure the nav sits behind, but that's not necessary because the nav element comes before the content-wrap in the HTML, so you only need to position them, not explicitly set a stacking order.
注意：我认为您最初可能在 #content-wrap 和 #ctrlNavPanel 上使用了 z-indexes 以确保导航位于后面，但这不是必需的，因为导航元素在 HTML 中位于内容包装之前，因此您只需需要定位它们，而不是明确设置堆叠顺序。
EDITAs Schmalzy picked up on, the links are no longer clickable. This is because the full-container is 100% wide and so covers the navigation. The quickest way to fix this is to place the navigation inside that div:
编辑随着 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>
回答by jacoswarts
In my case, I could fix it by adding css for the .modal-backdrop
就我而言，我可以通过为 .modal-backdrop
.modal-backdrop {
z-index: -1;
}
Although this works, form controls still seem to appear above the backdrop, clicking anywhere dismisses the modal, but it doesn't look great.
虽然这有效，但表单控件似乎仍然出现在背景上方，单击任意位置会关闭模式，但看起来不太好。
A better workaround for me is to bind to the shown event (once the page is loaded) and to correct the z-index property.
对我来说更好的解决方法是绑定到显示的事件（加载页面后）并更正 z-index 属性。
$('.modal').on('shown.bs.modal', function() {
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
In this case, if you are OK with changing the DOM on modal shown:
在这种情况下，如果您可以更改所示模式上的 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);
});
回答by user109764
None of the answers worked well enough for me. The problem appeared to lie where the modal windows needs to be outside of the body.and it is not best
没有一个答案对我来说足够好。问题似乎在于模态窗口需要在 body 之外。这不是最好的
So this code done the job just prefectly:
所以这段代码完美地完成了这项工作：
$('.modal ').insertAfter($('body'));$('#product_' + product_id + ' .modal ').insertAfter($('body'));
回答by Michael Crenshaw
I'm wary of moving the modal content outside its original context: other JS or styles might depend on that context.
我对将模态内容移出其原始上下文持谨慎态度：其他 JS 或样式可能取决于该上下文。
However, I doubt there are any scripts or styles that require a specific context for the backdrop.
但是，我怀疑是否有任何脚本或样式需要特定的背景上下文。
So my solution is to move the backdrop adjacent to the modal content, forcing it into the same stacking context:
所以我的解决方案是将背景移动到模态内容旁边，迫使它进入相同的堆叠上下文：
$(document).on('shown.bs.modal', '.modal', function () {
$('.modal-backdrop').before($(this));
});
It's only a slight deviation from jacoswarts' solution, so thanks for the inspiration!
与jacoswarts的解决方案只有轻微的偏差，所以感谢您的启发！
回答by Carlos Magno
Try remove the backdrop, if you don't realy need it (data-backdrop= "false"):
尝试删除背景，如果你真的不需要它 (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>
回答by Lrodriguez84
I was fighting with the same problem some days... I found three posible solutions, but i dont know, which is the most optimal, if somebody tell me, i will be grateful.
几天我一直在与同样的问题作斗争......我找到了三种可能的解决方案，但我不知道哪个是最佳的，如果有人告诉我，我将不胜感激。
the modifications will be in bootstrap.css
修改将在 bootstrap.css 中
Option 1:
选项1：
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040; <- DELETE THIS LINE
background-color: #000000;
}
Option 2:
选项 2：
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1; <- MODIFY THIS VALUE BY -1
background-color: #000000;
}
Option 3:
选项 3：
/*ADD THIS*/
.modal-backdrop.fade.in {
z-index: -1;
}
I used the option 2.
我使用了选项 2。
回答by Eugene Shytik
In my case one of parents of my modal was animated and had this
在我的情况下，我的模态的父母之一是动画的并且有这个
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 100;
}
The blocker here is animation-fill-mode: both;. I could not just move modal outside, so the solution was to override 'animation-fill-mode' to animation-fill-mode: none;. Animation still worked fine.
这里的阻滞剂是animation-fill-mode: both;。我不能只是将 modal 移到外面，所以解决方案是将 'animation-fill-mode' 覆盖到animation-fill-mode: none;. 动画效果还是不错的。
回答by Mihaela Rada
Another resolution for this problem is to add z-index: 0;to .modal-backdrop class in your bootstrap-dialog.css file if you don't want to modify bootstrap.css.
z-index: 0;如果您不想修改 bootstrap.css ，则此问题的另一个解决方案是添加到 bootstrap-dialog.css 文件中的 .modal-backdrop 类。
回答by dimson d
if we cannot delete backdrop and/or we have component framework such angular or vue we cannot move modal to the root. i did this trick: put my custom modal-backdrop container(with aditional class) as sibling for modal-dialog container and added some css
如果我们不能删除背景和/或我们有像 angular 或 vue 这样的组件框架，我们就不能将模态移动到根。我做了这个技巧：将我的自定义模态背景容器（带有附加类）作为模态对话框容器的兄弟并添加了一些 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>
and css
和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}
