twitter-bootstrap 由于定位导航栏，Bootstrap 模态被涂黑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14144358/
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 getting blacked out because of positioned navbar
提问by yndolok
When my Bootstrap modal is shown, it looks like it's behind the black backdrop. Clicking anywhere on the screen causes the modal to go away.
当我的 Bootstrap 模态显示时，它看起来像是在黑色背景后面。单击屏幕上的任意位置会导致模态消失。
The problem seems to be caused by positioning my navbar - removing position: absolute;or position: relative;fixes it. Unfortunately, since I need to use the z-index on the navbar, I can't get rid of the positioning.
问题似乎是由定位我的导航栏引起的 - 删除position: absolute;或position: relative;修复它。不幸的是，由于我需要在导航栏上使用 z-index，我无法摆脱定位。
Why is the navbar's positioning causing the modal to be blacked out? Is there a way to make the modal appear in front of the backdrop while keeping the positioning on the navbar?
为什么导航栏的定位会导致模态变黑？有没有办法让模态出现在背景前，同时保持导航栏上的定位？
回答by Pricey
It is because your modal is inside your #nav_inner<div>so it will inherit some styling that you do not want it to.
这是因为你的模态在你的内部，#nav_inner<div>所以它会继承一些你不想要的样式。
It does not need to be there.
它不需要在那里。
Try moving it into the body like below:
尝试将其移动到正文中，如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="gutter" id="left_gutter"></div>
<div class="gutter" id="right_gutter"></div>
<div id="container">
<div class="navbar">
<div id="nav_inner">
<div class="page" id="nav_page">
<div class="content_wrapper">
<div class="content">
<a href="#add_topic_modal" role="button" data-toggle="modal" id="teach">Teach</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_inner">
</div>
</div>
<div class="modal hide fade" id="add_topic_modal" tabindex="-1" role="dialog" aria-labelledby="add_lesson_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="add_lesson_label">Teach</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</body>
</html>
UPDATE:This is one of those issues were I knew changing the element position in the DOM would fix it, but understanding the cause is another problem entirely.
更新：这是其中一个问题，我知道更改 DOM 中的元素位置会解决它，但了解原因完全是另一个问题。
Removing position: relative; z-index: 2;from both #navbarand #nav_inneralso fixes the problem, so even though the modal has position: fixed; z-index: 1050;where z-index only works with a position and a fixed position puts the element positioned relative to the browser window, this was still not working due to the parent element having a relative position and z-index... magic.
position: relative; z-index: 2;从两者中删除#navbar并#nav_inner解决问题，因此即使模态具有position: fixed; z-index: 1050;z-index 仅适用于一个位置并且固定位置将元素放置在相对于浏览器窗口的位置，这仍然无法正常工作，因为父元素具有相对位置和 z-index ......魔术。
The reason the faded background appeared above was because this is added to the body using javascript, so it had no trouble with applying the correct z-index of 1040, and was placed above the modal.
上面出现褪色背景的原因是因为这是使用javascript将其添加到主体中的，因此应用正确的z-index 1040没有问题，并且被放置在模态上方。
回答by jakobdo
I was having the same problem. But as my content was loaded by ajax, I was unable to create "modal" before closing
我遇到了同样的问题。但是由于我的内容是由 ajax 加载的，所以我无法在关闭之前创建“模态”
So i did this:
所以我这样做了：
$(function(){
$("#add_topic_modal").appendTo("body");
});
And now the "modal" works as expected.
现在“模态”按预期工作。
