Specific modal-backdrop customizing

Question

I can change the CSS for one of many modals in my page by setting as selector the id of that specific modal.

e.g. instead:

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

setting

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

My question:

How can I change the css for only #my_modal's corresponding .modal-backdrop element?

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

works, while

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

doesn't works

Why the behavior is so?

Answer 1

How can I change the css for only #my_modal's corresponding modal-backdrop?

// 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');
    });
}); 

This works for me. Check out this jsFiddle.

Answer 2

You need to bind the show and hide evento of your modal and add a class to .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 */ }