我尝试显示 Bootstrap 4 模式，但没有背景。
为了做到这一点，我尝试了这个，但没有成功：
.modal.right. modal-backdrop.show {
background-color: transparent !important;
}
如果我尝试这样做，它会起作用（但它不仅适用于“正确”类）：
modal-backdrop.show {
background-color: red;
}
这里是测试示例：https://codepen.io/cdemez/pen/abdmxXZ
如果有人有解决问题的想法？
【问题讨论】：
标签： html css bootstrap-4
更改特定模式的背景不能使用纯 CSS 设置样式。 Bootstrap 没有定义这样的事情。
在 CSS 的帮助下，您可以全局更改背景样式（适用于所有 modal 的背景）。
模态背景元素在modal 类之外。因此，您可以在 jquery 的帮助下定位元素。
$('#exampleModal').on('show.bs.modal', function (e) {
//parent element of backdrop is `body`
$('body').addClass("example-open");
}).on('hide.bs.modal', function (e) {
$('body').removeClass("example-open");
})
然后你可以使用 css
.example-open .modal-backdrop {background-color:red !important;}
【讨论】：
fade 动画。通过从模式中删除 fade 类尝试一次。
据我了解，您希望模态显示没有背景。查看您的 HTML，您的标签为
<div class="modal right fade" data-backdrop="hidden" id="exampleModal" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
data-drop 属性是一个布尔值，因此将其更改为 false，它应该会移除背景。
像这样：
<div class="modal right fade" data-backdrop="false" id="exampleModal" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
【讨论】：