Bootstrap 4 模态不透明度

Posted 2023-03-05

【中文标题】Bootstrap 4 模态不透明度

【英文标题】：Bootstrap 4 Modal Opacity

【发布时间】：2018-03-11 03:54:33

【问题描述】：

所以我正在使用 Bootstrap 4 Beta 并希望在显示模态时使背景变暗。我看到一个帖子，我只需要添加 css 类

.modal-backdrop.in 
    opacity: 0.5 !important;
    position: fixed;

到我的 CSS 文件。他们写道，我不需要将类添加到 div，只需将其添加到 CSS 文件中即可。所以如果我只是添加它，它不会发生任何事情。如果我随后将该类也添加到我的模态 div 中，那么一切都会获得不透明度，甚至是模态本身。有人知道如何解决这个问题吗？

【参考方案1】：

只需通过覆盖来更新模态框的当前 CSS 类。

.modal-backdrop.show 
    opacity: 0.8;

.show 是包含背景不透明度的类。

【讨论】：

所以我用 .show 替换了 .in 但结果是一样的。

您还必须覆盖 CSS。

覆盖是什么意思？我在css文件中替换了它

我已经修好了。问题是我用 $("#myModal").show() 触发了模态我构建了一个不可见的按钮，该按钮将由 .click() 调用，然后调用在 data-target 属性中设置的原始模态跨度>

更新：意识到我不需要构建一个不可见的按钮。我现在使用 .modal("show") 而不是 .show()。