Bootstrap 4 - 如何在 modal.backdrop 中删除或编辑不透明度答案

【问题标题】：Bootstrap 4 - How remove or edit opacity in modal.backdropBootstrap 4 - 如何在 modal.backdrop 中删除或编辑不透明度
【发布时间】：2020-03-14 10:38:10
【问题描述】：

我正在使用 Angular 并想创建一个模态。但是，我在删除或编辑模态背景时遇到了很多问题，因为它从不接受我在 css 中的值。

可以通过 data-backdrop = false 删除，我知道，但我打算在单击此之外关闭模式，它不使用数据背景。

有经验的人可以帮助我吗？我已经在这几天了，到目前为止仍然一无所获。

我将代码和 stackblitz 留给测试。谢谢！

代码

Stackblitz

HTML

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          Modal body..
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

我不确定这是什么问题，我可以在这里更改背景不透明度和颜色stackblitz.com/edit/angular-1dh6k3
@SmokeyDawson 这么简单的解决方案却不容易找到，非常感谢！我总是在 .modal 背景下尝试一些东西，但什么也没有。谢谢！做出回答，给你功德
我已经添加了我的答案，谢谢

标签： html css angular twitter-bootstrap

【解决方案1】：

你可以试试这个：

.modal-backdrop {
  opacity: 0 !important;
}

【讨论】：

【解决方案2】：

如本次stackblitz所示https://stackblitz.com/edit/angular-1dh6k3

你可以添加

.fade.show {
  background: red; // example
  opacity: 1; // example
}

您可以编辑模态背景

【讨论】：

【解决方案3】：

不使用!important 的替代答案（应尽可能避免）

::ng-deep .modal-backdrop.show {
  background: transparent;
}

【讨论】：