twitter-bootstrap Bootstrap Modal 弹出但有一个“有色”页面并且无法交互
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17911918/
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 popping up but has a "tinted" page and can't interact
提问by user1072337
I am using bootstrap to set up a modal popup. When a button is clicked, the modal dialog opens, but the entire page is slightly "tinted", and I can't interact with the modal (the page essentially freezes). Do you know why this would be? Here is the code:
我正在使用引导程序来设置模态弹出窗口。单击按钮时，模态对话框打开，但整个页面略微“着色”，我无法与模态交互（页面基本上冻结）。你知道为什么会这样吗？这是代码：
button:
按钮：
<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>
modal:
模态：
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Congratulations!</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show optional scrollbar</h4>
<p>body</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
EDIT:
编辑：
Here are the included files:
以下是包含的文件：
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css">
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/script.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script>
EDIT: Happens in all browsers tried (Chrome, Firefox, Safari)
编辑：发生在所有尝试过的浏览器中（Chrome、Firefox、Safari）
回答by user1072337
Ok, so I figured out the issue.
好的，所以我想出了这个问题。
If the modal container has a fixed position or is within an element with fixed position this behavior will occur.
如果模态容器具有固定位置或位于具有固定位置的元素内，则会发生此行为。
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 .
最简单的方法是移动模态 div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在结束 body 标签之前。
This is what I did, and it worked.
这就是我所做的，并且奏效了。
回答by Rob Lyndon
This happened to me, and it took ages to diagnose. If it happens to you, add this to your css:
这发生在我身上，诊断花了很长时间。如果发生在您身上，请将其添加到您的 css 中：
div.modal div.modal-backdrop {
z-index: 0;
}
EDIT: You may need more specificity for this setting to be picked up. As Nick Spoon suggests, you can use
编辑：您可能需要更具体地选择此设置。正如 Nick Spoon 建议的那样，您可以使用
body.modal-open div.modal-backdrop {
z-index: 0;
}
And you may need to add more qualifiers, depending on what the rest of your CSS is doing. You can also use !important, but that's just sweeping the problem under the rug.
并且您可能需要添加更多限定符，这取决于您的 CSS 的其余部分正在做什么。您也可以使用!important，但这只是将问题抛诸脑后。
回答by Mehmood Memon
Solved it by adding data-backdrop="false"to the main div as:
通过添加data-backdrop="false"到主div来解决它：
<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">
......
</div>
回答by Miguel Pereira
I found a good fix for this problem here:
我在这里找到了解决此问题的好方法：
https://stackoverflow.com/a/18764086
https://stackoverflow.com/a/18764086
Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.
将 -webkit-transform: translateZ(0) 添加到 position: fixed 元素。这迫使 Chrome 使用硬件加速来持续绘制固定元素并避免这种奇怪的行为。
回答by nrajsharma794
If you want to open the print dialog on button present on modal itself and after printing your webpage is not accessible then it will definitely work for you
rather then the window.print().
如果您想在模态本身上的按钮上打开打印对话框，并且在打印您的网页后无法访问，那么它肯定对您有用，而不是window.print().
Use below code. First of all you need to close the modal dialog and open the print dialog after few seconds.
使用下面的代码。首先，您需要关闭模态对话框并在几秒钟后打开打印对话框。
setTimeout(function() { printnow('printdiv', 10); }, 500);
回答by FayeB
I fixed this problem by moving all modal html to the bottom of my file! Nothing else worked. Only the button to open the modal is within the rest of the html. This could have something to do with body tag declarations but I don't have time to worry about it.
我通过将所有模态 html 移动到我的文件底部来解决这个问题！没有其他工作。只有打开模态的按钮位于 html 的其余部分。这可能与正文标记声明有关，但我没有时间担心。
回答by jroyce
I ran into this as well and found this exact phenomenon occurs with the screen freezing after clicking the button to open a Modal and found this was due to an unclosed that I accidently deleted.
我也遇到了这个问题，发现在单击按钮打开模态后屏幕冻结会发生这种确切的现象，并发现这是由于我不小心删除了未关闭的。
When I added the closing , the Modal Popup started working again.
当我添加了结束时，模态弹出窗口又开始工作了。
回答by Simon Morgan
If you're using ASP.NET, make sure you place the modal's divblock inside a <asp:Content ContentPlaceHolderID="BottomOfForm" runat="server">.
如果您使用的是 ASP.NET，请确保将模态div块放在<asp:Content ContentPlaceHolderID="BottomOfForm" runat="server">.
回答by hgolov
I know this is an old question, but I had a similar issue and in case anyone has the same, here is what worked for me. Make sure you include the modal css file!
我知道这是一个老问题，但我有一个类似的问题，如果有人有同样的问题，这对我有用。确保包含模态 css 文件！
