如何更改两个不同的Bootstrap模态框的背景颜色？

Question

当创建Bootstrap模态框时，.modal-backdrop会添加到HTML的末尾以创建背景颜色。我可以通过更改该类的颜色来手动切换颜色，但是我想根据触发哪个2个模态框之一来切换该类的颜色。

我目前正在使用同级选择器来区分我想要的颜色，但无论调用哪个模态框，它现在都显示#000。

CSS：

.modal-backdrop {
  background-color: #fff;
}
.card-modal ~ .modal-backdrop {
  background-color: #000;
}

- Chris

---

这两者有什么不同？是在标记中的位置、兄弟姐妹或具有唯一的类吗？ - Asons

我试图将唯一的类.card-modal添加到第二个模态HTML（突出显示），以便在调用该模态时，附加在底部的.modal-backdrop类使用#000。问题是，现在两个模态都以#000结束，包括第一个没有唯一类.card-modal的模态HTML。 - Chris

Answer 1

$(".modal1").on('shown.bs.modal', function() {
  $('.modal-backdrop').css('background', 'red');
});

$(".modal1").on('hidden.bs.modal', function() {
  $('.modal-backdrop').css('background', '#000');
});

.wrap {
  padding: 15px;
}
h1 {
  font-size: 28px;
}
h4,
modal-title {
  font-size: 18px;
  font-weight: bold;
}
.no-borders {
  border: 0px;
}
.body-message {
  font-size: 18px;
}
.centered {
  text-align: center;
}
.btn-primary {
  background-color: #2086c1;
  border-color: transparent;
  outline: none;
  border-radius: 8px;
  font-size: 15px;
  padding: 10px 25px;
}
.btn-primary:hover {
  background-color: #2086c1;
  border-color: transparent;
}
.btn-primary:focus {
  outline: none;
}
.model1 .modal-backdrop {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1">
    Modal 1
  </button>
</div>

<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">

  <div class="modal-dialog modal-lg">

    <!-- Modal Content: begins -->
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header no-borders">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="gridSystemModalLabel"></h4>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <p class="body-message centered"><strong>Modal 1 here.</strong>
        </p>
      </div>

    </div>
    <!-- Modal Content: ends -->

  </div>

</div>

<!---------------------->
<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2">
    Modal 2
  </button>
</div>

<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true">

  <div class="modal-dialog modal-lg">

    <!-- Modal Content: begins -->
    <div class="modal-content">

      <!-- Modal Body -->
      <div class="modal-body">
        <div class="body-message">
          <h4>Modal 2 here.</h4>
          <p>How to change this background colour?</p>
        </div>
      </div>

    </div>
    <!-- Modal Content: ends -->

  </div>

</div>

更新

Bootstrap模态框的属性：

• shown.bs.modal在打开模态框时触发
• hidden.bs.modal在关闭模态框时触发

我的做法是，每当您尝试打开一个Bootstrap模态框时，会添加一个带有类modal-backdrop的div，我只需将该背景的颜色更改为您喜欢的颜色。每当您尝试移除模态框时，该div都将被删除。因此，您需要每次管理它。根据您的要求，如果您有两个以上的模态框，则每个模态框的颜色应不同（至少是我理解的）。

- Shalin Patel

---

谢谢你的答案，Shalin。你能解释一下你的jQuery吗？我看到你在每个模态HTML上有两个单独的类（modal1，modal2），但在您的jQuery中，似乎您只更改了modal1的颜色。如果您只是在JQuery中切换它，为什么需要2个CSS类？此外，“shown.bs.modal”与“hidden.bs.modal”如何知道您所指的模态？最后，如果您打开Modal 1，您会注意到在变为红色之前仍然会闪烁#000。我们如何防止这种情况发生？ - Chris

Answer 2

如果你想以编程方式打开模态对话框，可以这样做：

$('#myModal').modal('show');
$('#myModal').data('bs.modal').options.backdrop = 'static';
$('#myModal').data('bs.modal').options.keyboard = false;
$('#myModal').data('bs.modal').$backdrop.css('background-color', 'red'); <-- Set color!

除了打开模态对话框外，您还可以为背景行为定义各种选项。例如，是否应单击对话框外部关闭模态对话框。在您的键盘上按下Esc键也是如此。

此外，您还可以设置背景的CSS属性，例如background-color（请参见上面的示例）。但是，要引用模态对话框，您需要在HTML代码中的模态上定义唯一的ID。为解决您的问题，最后一行就足够了。我只是在此处设置了额外的选项，以展示这种功能。

- user1438038