缺少 Bootstrap 3 模态背景

Question

Bootstrap 3 模态通常会使页面变暗以突出显示模态本身，并表示在显示模态时页面 UI 被禁用。

在我编码过程中的某个时间点（几周前），背景不再出现。其他一切正常，包括通过单击关闭模式或单击右上角的 X 来关闭模式。页面 UI 也被禁用，直到模式关闭，这很好。由于是几千行代码，这里就不贴了。

我无法弄清楚为什么我的模态背景丢失了。我已经验证了我的 HTML 以确保没有丢失的标签。我也在我的页面上使用数据表、tabdrop 和 d3，但尝试一一删除这些（JS 和 CSS）以解决问题无济于事。我还应该检查什么？

这里是页面：http://suite.swiftdigital.com.au/scripts/marcus/modal/event.htm

单击绿色的“新参与者”按钮以查看其中一种模式。另一个是屏幕中间的编辑视图按钮。

Answer 1

毕竟这不是 CSS 或 HTML 问题。获取最新的 Bootstrap JS 文件修复了它。我在 3.2.0 上并升级到 3.3.1。嗯。 （您需要确保 Bootstrap JS 和 CSS 的版本匹配。）

Answer 2

将此添加到您的 CSS：

.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.7;
filter: alpha(opacity=70);
background: #fff;
}

如果您只是使用股票引导 CSS。这将使背景变为白色，不透明度为 70%。

或

将此添加到您的 CSS：

    .fade.in {
opacity: .75;
background-color: #000;
}

这是因为现在，您的 .fade.in 类没有附加背景颜色。

Answer 3

将您的代码与 OOTB Bootstrap 网站进行比较，您的代码如下所示：

<div class="modal-dialog" style="width: 600px">
        <div class="modal-content">
            <div class="modal-header">...
                rest of the module

Bootstrap 的代码如下：

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; padding-right: 17px;">
    <div class="modal-backdrop fade in" style="height: 995px;"></div>
    <div class="modal-dialog">
      <div class="modal-content">

您似乎缺少下面的这一行。尝试将其添加到您的 modal-dialog DIV 下方

<div class="modal-backdrop fade in" style="height: 995px;"></div>