Javascript Bootstrap 模式出现在背景下
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10636667/
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 appearing under background
提问by natlines
I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.
我直接从 Bootstrap 示例中使用了我的模态代码，并且只包含了 bootstrap.js（而不是 bootstrap-modal.js）。但是，我的模态出现在灰色淡入淡出（背景）下方并且不可编辑。
Here's what it looks like:
这是它的样子：
See this fiddlefor oneway to reproduce this problem. The basic structure of that code is like this:
见这拨弄了一个重现此问题的一种方法。该代码的基本结构是这样的：
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Any ideas why this is or what I can do to fix this?
任何想法为什么会这样或我可以做些什么来解决这个问题？
回答by Muhd
If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.
如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素内，则会发生此行为。
Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.
确保以默认方式定位模态容器及其所有父元素以解决问题。
Here are a couple ways to do this:
这里有几种方法可以做到这一点：
- Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag
</body>. - Alternatively, you can remove
position:CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.
- 最简单的方法是移动模态 div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在结束 body 标签之前
</body>。 - 或者，您可以
position:从模态及其祖先中删除CSS 属性，直到问题消失。但是，这可能会改变页面的外观和功能。
回答by Adam Albright
The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were showing your modal using js:
问题与父容器的定位有关。您可以轻松地将模态从这些容器中“移出”，然后再显示。如果您show使用 js 对模态进行操作，请执行以下操作：
$('#myModal').appendTo("body").modal('show');
Or, if you launch modal using buttons, drop the .modal('show');and just do:
或者，如果您使用按钮启动模态，请删除.modal('show');并执行以下操作：
$('#myModal').appendTo("body")
This will keep all normal functionality, allowing you to show the modal using a button.
这将保留所有正常功能，允许您使用按钮显示模态。
回答by Jan van der Burgt
I tried all options supplied above but didn't get it to work using those.
我尝试了上面提供的所有选项，但没有使用这些选项使其工作。
What did work:setting the z-index of the .modal-backdrop to -1.
什么起作用了：将 .modal-backdrop 的 z-index 设置为 -1。
.modal-backdrop {
z-index: -1;
}
回答by Sid
Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:
另外，请确保 BootStrap css 和 js 的版本是相同的。不同的版本也可以使模态出现在背景下：
For example:
例如：
Bad:
坏的：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Good:
好的：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
回答by PieterVK
I have also encountered this problem and none of the solutions worked for me until i figured out i actually don't need a backdrop. You can easily remove the backdrop with the folowing code.
我也遇到过这个问题，在我发现我实际上不需要背景之前，没有一个解决方案对我有用。您可以使用以下代码轻松删除背景。
<div class="modal fade" id="createModal" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create Project</h4>
</div>
<div class="modal-body">Not yet made</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note: the data-backdropattribute needs to be set to false(other options: staticor true).
注意：该data-backdrop属性需要设置为false（其他选项：static或true）。
回答by Andrew Dyster
I got it to work by giving a high z-index value to the modal window AFTERopening it. E.g.:
我通过在打开它后为模态窗口提供高 z-index 值来使其工作。例如：
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
回答by Krishnendu
Solution provided by @Muhd is the best way to do it. But if you are stuck in a situation where changing structure of the page is not an option, use this trick:
@Muhd 提供的解决方案是最好的方法。但是，如果您遇到无法更改页面结构的情况，请使用以下技巧：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
The trick in here is data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"by removing the default backdrop and create a dummy one by setting background color of the dialog itself with some alpha.
这里的技巧是data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"删除默认背景并通过使用一些 alpha 设置对话框本身的背景颜色来创建一个虚拟背景。
Update 1:As pointed out by @Gustyn that clicking on the background does not close the dialog as is expected. So to achieve that you have to add some java script code. Here is some example how you can achieve this.
更新 1：正如@Gustyn 指出的那样，单击背景不会按预期关闭对话框。因此，要实现这一点，您必须添加一些 java 脚本代码。下面是一些如何实现这一目标的示例。
$('.modal').click(function(event){
$(event.target).modal('hide');
});
回答by Rohan
A but late on this but here is a generic solution -
A但迟到了，但这是一个通用的解决方案-
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
Visit this link - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebarfor details.
访问此链接 - Bootstrap 3 - 使用固定侧边栏获取详细信息时，模态消失在背景下。
回答by Samuel Bergeron
An other way to approach this is to remove the z-index from the .modal-backdropin bootstrap.css. This will cause the backdrop to be on the same level as the rest of your body (it will still fade) and your modal to be on top.
解决此问题的另一种方法是从.modal-backdropbootstrap.css 中删除 z-index 。这将导致背景与您身体的其余部分处于同一水平（它仍然会褪色）并且您的模态位于顶部。
.modal-backdroplooks like this
.modal-backdrop看起来像这样
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
回答by Wahyu Primadi
Just add two lines of CSS:
只需添加两行 CSS：
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
The .modal-backdrop should have 1050 value to set it over the navbar.
.modal-backdrop 应具有 1050 值以将其设置在导航栏上。
