3

特定のモーダルの ID をセレクターとして設定することで、ページ内の多くのモーダルの 1 つの 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');

動作しません

なぜそのような振る舞いをするのですか？

4

2 に答える 2

7

#my_modal の対応する modal-backdrop のみの 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をチェックしてください。

于 2015-12-08T12:25:22.870 に答える
4

モーダルのshowとhideeventoをバインドし、.modal-backdropdivにクラスを追加する必要があります。

ここで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 */ }
于 2012-06-28T13:08:02.220 に答える