特定的模态背景定制

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 的 show 和 hide eventto，并在 .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 */ }