CSS设置Modal遮罩层透明失效问题求助

问题说明 #

尝试将Bootstrap模态框的遮罩层设为透明，但自定义CSS未生效，相关代码如下：

自定义CSS #

.modal-backdrop {
    background-color: transparent;
}

模态框HTML #

<div class="modal fade" id="notificationModal" >
<div class="modal-dialog notification modal-dialog-scrollable">
    <div class="modal-content">
        <div class="modal-header" style="background-color: #009ee2;">
            <span class="modal-title col-md-3" style="color: white; font-size: 25px; padding-bottom: 0.5rem;">
                通知</span>
        </div>
        <div class="modal-body" style="color: black; padding-top: 0px;">
            <div class="table-responsive">
                <div style="height: 0.25rem;"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
    </div>
</div>

触发按钮HTML #

<li class="nav-item">
    <a href="#" class="navbar-nav-link" data-toggle="modal" 
        data-target="#notificationModal">
        <i class="icon-bell2"></i>
        <span class="d-md-none ml-2"></span>
        <span class="badge border-white ml-auto ml-md-0" style="color: white;">10</span>
    </a>
</li>

解决方法 #

1. 提升CSS选择器优先级 #

Bootstrap默认的.modal-backdrop.show样式优先级比单独的.modal-backdrop高，所以需要用更具体的选择器覆盖：

.modal-backdrop.show {
    background-color: transparent;
}

如果还是无效，可以暂时用!important强制覆盖（不推荐长期使用，尽量优化选择器）：

.modal-backdrop {
    background-color: transparent !important;
}

2. 直接移除或通过配置设置遮罩 #

如果不需要遮罩，可直接在模态框标签添加data-backdrop="false"属性：

<div class="modal fade" id="notificationModal" data-backdrop="false">

也可以通过JavaScript初始化时动态设置：

$('#notificationModal').modal({
    backdrop: 'static'
}).on('show.bs.modal', function() {
    $('.modal-backdrop').css('background-color', 'transparent');
});

3. 检查CSS加载顺序 #

确保你的自定义CSS文件在Bootstrap CSS之后加载，这样自定义样式才能覆盖默认样式。

内容的提问来源于stack exchange，提问作者e Res