Bootstrap 缺少 3 个模态背景

Question

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

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

我不明白为什么我的模态背景不见了。我已经验证了我的 HTML 以确保没有遗漏标签。我还在我的页面上使用了数据表、tabdrop 和 d3，但我尝试将它们（JS 和 CSS）一一删除以解决问题，但无济于事。我还应该检查什么？

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

单击绿色 "New Participant" 按钮可查看其中一个模态框。另一个是屏幕中间的“编辑视图”按钮。

Answer 1

将此添加到您的 css：

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

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

或

将此添加到您的 css：

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

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

Answer 2

将您的代码与 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>

Answer 3

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

Bootstrap 缺少 3 个模态背景

Bootstrap 3 modal background is missing

html

css

datatables

twitter-bootstrap-3