Bootstrap Modal弹出，但有一个“有色”页面，不能交互
Bootstrap Modal弹出，但有一个“有色”页面，不能交互
提问于 2013-07-29 03:19:07
我正在使用bootstrap来设置一个模式弹出窗口。当一个按钮被点击时，模式对话框打开，但整个页面是略微“着色”的，并且我不能与模式交互(页面本质上冻结)。你知道为什么会这样吗？代码如下：
按钮：
<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>模式：
<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 -->编辑：
以下是包含的文件：
<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>编辑:在所有尝试过的浏览器中发生(Chrome、Firefox、Safari)
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-07-29 09:04:20
好了，我想出了问题所在。
如果模态容器有一个固定的位置，或者在一个具有固定位置的元素中，就会发生这种行为。
最简单的方法是只移动模式div，这样它就在任何具有特殊位置的元素之外。一个很好的位置可能就在结束body标签之前。
这就是我所做的，它起作用了。
Stack Overflow用户
发布于 2019-12-17 18:43:58
解决方法是将data-backdrop="false"添加到主目录，如下所示：
<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">
......
</div>Stack Overflow用户
发布于 2019-01-03 19:17:38
如果你想打开打印对话框上的按钮存在模式本身和打印后，你的网页是不可访问的，那么它肯定会为你工作，而不是window.print()。
使用下面的代码。首先，您需要关闭模式对话框，并在几秒钟后打开打印对话框。
setTimeout(function() { printnow('printdiv', 10); }, 500);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17911918
复制相关文章
相似问题