Question

我可以通过将该特定模态的ID设置为选择器来更改页面中多个模态之一的CSS。

e.g。代替：

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

设置

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

我的问题：

如何仅针对#my_modal相应的模态背景更改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

您需要绑定show并隐藏模态的evento，并将类添加到.modal-backdrop div。

Jsfiddle here。

的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 */ }

特定的模态背景定制

2 个答案: