css - 特定的模态背景定制

Question

我可以通过将特定模式的 id 设置为选择器来更改页面中许多模式之一的 CSS。

例如：

.modal {
    top: 0px;
    margin-top: 240px;
    ...
}

环境

#my_modal {
    top: 0px;
    margin-top: 240px;
    ...
}

我的问题：

如何更改仅#my_modal对应modal-backdrop的 css ？

 $('.modal').addClass('my_personal_stuff');

工作，而

 $('.modal-backdrop').addClass('my_personal_stuff');

不起作用

为什么会有这样的行为？

Answer 1

如何仅为#my_modal 的相应模态背景更改css？

// Add an extra class to the modal backdrop to make it customizable
$('.modal--custom').on('show.bs.modal', function (e) {
    setTimeout(function(){
        $('.modal-backdrop').addClass('modal-backdrop--custom');
    });
}); 

这对我有用。看看这个jsFiddle。

Answer 2

您需要绑定模态的显示和隐藏事件并将一个类添加到 .modal-backdrop div。

Jsfiddle在这里。

Javascript

function haveBackdrop() {
    if ($('.modal-backdrop').length > 0) {
        $('.modal-backdrop').addClass('my-modal-backdrop');
        clearTimeout(mBackdrop);
        return true;
    }
    return false;
}
var mBackdrop;

$('#myModal').on('show', function() {
    mBackdrop = setTimeout("haveBackdrop()", 100);
});

CSS

.my-modal-backdrop { /* your css backdrop modifications */ }