Специальная настройка модального фона

Question

Я могу изменить CSS для одного из многих модалов на моей странице, установив в качестве селектора идентификатор этого конкретного модального.

например. вместо:

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

установка

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

Мой вопрос:

Как я могу изменить CSS для только #my_modal «ы соответствующего модальный-фон?

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

работы, в то время как

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

не работает

Почему поведение так?

Answer 1

Вам нужно связать шоу и скрыть evento вашего модального объекта и добавить класс в .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 */ } 

Answer 2

Как я могу изменить CSS только для сравнения # my_modal в соответствующем модального-фона?

// Give modal backdrop an extra class to make it customizable 
$('.modal-custom').on('show.bs.modal', function (e) { 
    setTimeout(function(){ 
     $('.modal-backdrop').addClass('modal-backdrop-custom'); 
    }); 
}); 

Это работает для меня. Проверьте это jsFiddle.