Bootstrap Modal 弹出，但有一个“有色”页面并且无法交互

问题描述 投票：0回答：11

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

按钮：

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

twitter-bootstrap modal-dialog
11个回答
65
投票

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

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

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

这就是我所做的，而且有效。

31
投票

这发生在我身上，花了很长时间才诊断出来。如果你遇到这种情况，请将其添加到你的 css 中：

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

编辑：您可能需要更多具体信息才能选择此设置。正如 Nick Spoon 所建议的，你可以使用

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

您可能需要添加更多限定符，具体取决于 CSS 的其余部分正在做什么。您也可以使用 

!important
，但这只是把问题掩盖起来。

8
投票

通过将 

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

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

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

https://stackoverflow.com/a/18764086

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

1
投票

如果您想打开模式本身上存在的按钮上的打印对话框，并且打印后您的网页无法访问，那么它肯定适合您 而不是 

window.print()
。

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

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

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

0
投票

我也遇到了这个问题，发现在单击按钮打开模态框后屏幕冻结时会出现这种现象，并发现这是由于我不小心删除了未关闭的内容所致。

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

0
投票

如果您使用的是 ASP.NET，请确保将模式的 

div
块放在 
<asp:Content ContentPlaceHolderID="BottomOfForm" runat="server">
内。

0
投票

对我有用的最简单的解决方案是将模态 

div
移动到 
body
标签结束位置的上方。

我希望这也适合你。

0
投票

我在 Angular 17 上遇到了同样的问题。这似乎已经解决了：

组件声明上方：

declare var bootstrap: any

在 ngOnInit() 中：

// these three lines of code fix an issue with the bootstrap
// modal not appearing correctly
this.confirmDeleteModal = new bootstrap.Modal('#myModal');
var body = document.body;
body.insertAdjacentElement('beforeend', document.getElementById('myModal')!);

HTML：

<div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog modal-dialog-centered" >
        <div class="modal-content"> 
        ... the rest of the modal HTML

另外，不确定它是否相关，但模式的 HTML 块是 HTML 文件中的最后一个块；即它出现在所有其他 HTML 之后。

最后一点：我尝试了 insertAdjacentElement 的“afterbegin”选项，但这导致了模式按钮单击事件触发的问题。 “beforeend”似乎可以解决问题。

-1
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.