Twitter bootstrap 引导模式弹出,但有一个;有色的;页面和can';不互动

Twitter bootstrap 引导模式弹出,但有一个;有色的;页面和can';不互动,twitter-bootstrap,modal-dialog,Twitter Bootstrap,Modal Dialog,我正在使用引导设置一个模式弹出窗口。当点击一个按钮时,模式对话框打开,但整个页面略微“着色”,我无法与模式交互(页面基本上冻结)。你知道为什么会这样吗?代码如下: 按钮: <a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvet

我正在使用引导设置一个模式弹出窗口。当点击一个按钮时,模式对话框打开,但整个页面略微“着色”,我无法与模式交互(页面基本上冻结)。你知道为什么会这样吗?代码如下:

按钮:

<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">&times;</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)中都会发生这种情况。

好的,所以我解决了这个问题

如果模态容器具有固定位置或位于具有固定位置的元素内,则会发生此行为

最简单的方法是移动modal div,使其位于具有特殊定位的任何元素之外。一个好地方可能就在结束body标记之前


我就是这么做的,而且成功了

我在这里找到了解决此问题的好方法:

将-webkit transform:translateZ(0)添加到position:fixed元素。这迫使Chrome使用硬件加速来连续绘制固定元素并避免这种奇怪的行为


这件事发生在我身上,我花了很长时间才做出诊断。如果发生在您身上,请将以下内容添加到css中:

div.modal div.modal-backdrop {
    z-index: 0;
}
编辑:您可能需要更详细的信息才能选择此设置。正如尼克·斯彭所建议的,你可以使用

body.modal-open div.modal-backdrop { 
    z-index: 0; 
}

您可能需要添加更多限定符,这取决于CSS的其他部分正在做什么。您也可以使用
!重要的
,但这只是把问题掩盖起来。

我知道这是一个老问题,但我有一个类似的问题,如果有人有同样的问题,下面是对我有效的方法。确保包含模式css文件

我通过将所有模式html移到文件底部解决了这个问题!没有别的办法。html的其余部分中只有打开模式的按钮。这可能与body标签声明有关,但我没有时间担心它。

我也遇到了这一问题,并发现在单击按钮打开一个模式后,屏幕冻结时会出现这种现象,并发现这是由于我意外删除了一个未关闭的模式


当我添加关闭按钮时,模式弹出窗口再次开始工作。

如果您使用的是ASP.NET,请确保将模式的
div
块放置在
中。如果您想在模式本身上的按钮上打开打印对话框,并且打印完您的网页后无法访问,那么它肯定会对您起作用 而不是
窗口.print()

使用下面的代码。 首先,您需要关闭模式对话框,并在几秒钟后打开打印对话框

setTimeout(function() { printnow('printdiv', 10); }, 500);

通过在主div中添加
data background=“false”
解决了此问题,如下所示:

<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">
  ......
</div>

......

jQueryUI可能会破坏它的模式CSS。尝试删除JS和CSS中的jQueryUI引用,看看模式是否有效,但这并不能解决问题。在我取出jqueryUI css和JSF之后,这个问题仍然存在,还有其他人吗?非常感谢您的帮助看起来您缺少了一个……我发现这个答案非常有用:我遇到了完全相同的问题。谢谢。这是比更改下面的模式背景的z索引(答案)更正确的修复方法。更改z索引有时不会正确淡出正文内容。谢谢!这种方法的一种变体对我有效:
body.modal-open div.modal-background{z-index:0;}
这个答案对我无效,但@nickspoon的评论是肯定的,这是可能发生的。你可能需要更多的特异性来识别它。我刚刚在一个新项目中遇到了同样的问题,这个答案拯救了我自己。非常感谢我一年多前的表现。太好了。这正是我的问题。我的一个div的z-index设置为1。。向0提及的内容起作用,但下方的div仍然可见,而其他所有内容都被遮住了,这看起来很酷,但我必须将模态设置设置为相同的z索引或更高的div,以便修复我的问题。谢谢你!!在这里工作。可能节省了我几个小时。到目前为止,最简单、最干净的方法,不需要CSS中的mod,范围仅限于所讨论的mod。