Categories
css modal-dialog twitter-bootstrap

Specific modal-backdrop customizing

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?

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

works, while

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

doesn’t works

Why the behavior is so?

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