css 特定模态背景定制

izj3ouym  于 2023-03-14  发布在  其他
关注(0)|答案(2)|浏览(138)

我可以通过将特定模态的id设置为selector来更改页面中许多模态之一的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');

不起作用
行为为何如此?

toe95027

toe950271#

我怎样才能只修改#my_modal对应的modal-background的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

pkln4tw6

pkln4tw62#

你需要绑定模态的show和hide evento,并在. modal-background div中添加一个类。
小提琴。
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);
});

中央支助系统

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

相关问题