31

我正在使用引导程序来设置模式弹出窗口。单击按钮时，模态对话框打开，但整个页面略微“着色”，我无法与模态交互（页面基本上冻结）。你知道为什么会这样吗？这是代码：

按钮：

<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）

4

10 回答 10

64

好的，所以我发现了这个问题。

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

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

这就是我所做的，并且奏效了。

于 2013-07-29T01:04:19.550 回答
32

这发生在我身上，诊断需要很长时间。如果它发生在您身上，请将其添加到您的 css 中：

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

编辑：您可能需要更多的特异性才能获取此设置。正如尼克勺子建议的那样，您可以使用

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

您可能需要添加更多限定符，具体取决于 CSS 的其余部分在做什么。您也可以使用!important，但这只是扫除问题。

于 2015-04-25T23:30:06.653 回答
7

通过添加data-backdrop="false"到主 div 来解决它：

<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">
  ......
</div>
于 2019-12-17T10:43:58.413 回答
3

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

https://stackoverflow.com/a/18764086

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

于 2015-03-19T06:35:11.380 回答
1

如果您想在 modal 本身的按钮上打开打印对话框，并且在打印您的网页后无法访问，那么它肯定会为您工作，而不是window.print().

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

setTimeout(function() { printnow('printdiv', 10); }, 500);
于 2019-01-03T11:17:38.420 回答
0

我通过将所有模态 html 移动到文件底部来解决此问题！没有其他工作。只有打开模式的按钮位于 html 的其余部分中。这可能与正文标记声明有关，但我没有时间担心它。

于 2017-05-17T14:02:50.023 回答
0

我也遇到了这个问题，发现这个确切的现象发生在单击按钮打开模态框后屏幕冻结，发现这是由于我不小心删除的未关闭。

当我添加关闭时，模态弹出窗口再次开始工作。

于 2018-02-22T21:00:28.413 回答
0

如果您使用的是 ASP.NET，请确保将模式div块放在<asp:Content ContentPlaceHolderID="BottomOfForm" runat="server">.

于 2018-10-29T10:42:54.957 回答
0

对我有用的最简单的解决方案是将模式移动到标签div关闭的上方。body

我希望这也适用于你。

于 2021-09-07T19:32:10.570 回答
-1

我知道这是一个老问题，但我有一个类似的问题，如果有人有同样的问题，这对我有用。确保包含模态 css 文件！

于 2016-03-18T10:24:57.480 回答