Html 缺少引导3模式背景

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

在我编写代码的某个时候（几周前），背景不再显示。其他一切工作正常，包括通过单击关闭模式或单击右上角的X来关闭模式。页面UI也会被禁用，直到模式关闭，这很好。因为它有数千行代码，所以我不会将它们粘贴到这里

我不明白为什么我的模态背景不见了。我已经验证了我的HTML，以确保没有丢失的标记。我也在我的页面上使用datatables、tabdrop和d3，但我已经尝试过逐个删除它们（JS和CSS）来解决这个问题，但没有效果。我还应该检查什么

以下是网页：

点击绿色的“新参与者”按钮查看其中一个模态。另一个是屏幕中间的Edview视图按钮。

< P>将此添加到CSS：

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

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

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

或

将此添加到css中：

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

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

---

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

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

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

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

---

这毕竟不是CSS或HTML问题。获取最新的引导JS文件修复了它。我使用的是3.2.0，升级到了3.3.1。呵呵。（您需要确保引导JS和CSS的版本匹配。）

如果不看到您的代码，很难说。可能有其他CSS元素覆盖了您的代码或缺少结束标记的代码部分。如果你想得到更好的帮助，你应该发布你的代码。我应该提到，问题发生在Chrome、Firefox和IE中。这发生在我忘记在

中嵌套
。模式头
，
。模式体
，和
。模式页脚
。模式内容
谢谢，萨诺娃，但第一个不起作用，第二个添加了背景，但也使我的模态半透明。看，我不认为我应该添加我自己的CSS来覆盖引导-显然有些东西被删除了，或者我在某个地方错误地覆盖了它。我相信你是正确的。如果您正在编辑bootstrap.css本身，请尝试将自定义样式提取到新的样式表中，然后加载一个新的bootstrap.css--我检查了您的代码，能够看到模态元素中缺少的背景色。我已重新下载了一个干净的bootstrap.min.css，并从我的页面中删除了所有其他css文件。我仍然有一个问题：谢谢@crazymatt，但这没有帮助。我最终得到了和我的模特一样宽的部分背景。不过找到了解决方案（见上文）。很高兴你能找到答案。把这个标记为你的答案？我会等着看是否有人能够复制这个，然后再给自己评分！但是如果你自己修好了，你就应该得到表扬。我刚刚经历了另一个类似的问题——这次“背景”也模糊了模态。然后我发现（再一次）我没有与引导CSS版本匹配的引导JS版本。在3.3.4和3.3.5之间，他们似乎已经将背景元素的位置从模态本身切换到了主体元素的末尾。我在使用3.3.8时遇到了同样的问题。切换到使用包中较少的文件（3.3.5），一切正常。谢谢你给我指明了正确的方向。