Как изменить 2 разных цвета фона Bootstrap Modals?

Question

Когда создается мода Bootstrap, в конец HTML добавляется .modal-backdrop, чтобы создать цвет фона. Я могу изменить цвет вручную, просто изменив цвет этого класса, однако я бы хотел переключить цвет этого класса в зависимости от того, какой из 2 модалов был запущен.

В настоящее время я использую селектор для сиблинга, чтобы попытаться отличить тот цвет, который мне бы хотелось, но независимо от того, какой модальный он называется, теперь он показывает # 000.

CSS:

.modal-backdrop { 
    background-color: #fff; 
} 
.card-modal ~ .modal-backdrop { 
    background-color: #000; 
} 

Answer 1

$(".modal1").on('shown.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', 'red'); 
 
}); 
 

 
$(".modal1").on('hidden.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', '#000'); 
 
});

.wrap { 
 
    padding: 15px; 
 
} 
 
h1 { 
 
    font-size: 28px; 
 
} 
 
h4, 
 
modal-title { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
} 
 
.no-borders { 
 
    border: 0px; 
 
} 
 
.body-message { 
 
    font-size: 18px; 
 
} 
 
.centered { 
 
    text-align: center; 
 
} 
 
.btn-primary { 
 
    background-color: #2086c1; 
 
    border-color: transparent; 
 
    outline: none; 
 
    border-radius: 8px; 
 
    font-size: 15px; 
 
    padding: 10px 25px; 
 
} 
 
.btn-primary:hover { 
 
    background-color: #2086c1; 
 
    border-color: transparent; 
 
} 
 
.btn-primary:focus { 
 
    outline: none; 
 
} 
 
.model1 .modal-backdrop { 
 
    background: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="wrap"> 
 
    <h1>Bootstrap Modal Example</h1> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1"> 
 
    Modal 1 
 
    </button> 
 
</div> 
 

 
<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true"> 
 

 
    <div class="modal-dialog modal-lg"> 
 

 
    <!-- Modal Content: begins --> 
 
    <div class="modal-content"> 
 

 
     <!-- Modal Header --> 
 
     <div class="modal-header no-borders"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="gridSystemModalLabel"></h4> 
 
     </div> 
 

 
     <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <p class="body-message centered"><strong>Modal 1 here.</strong> 
 
     </p> 
 
     </div> 
 

 
    </div> 
 
    <!-- Modal Content: ends --> 
 

 
    </div> 
 

 
</div> 
 

 
<!----------------------> 
 
<div class="wrap"> 
 
    <h1>Bootstrap Modal Example</h1> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2"> 
 
    Modal 2 
 
    </button> 
 
</div> 
 

 
<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true"> 
 

 
    <div class="modal-dialog modal-lg"> 
 

 
    <!-- Modal Content: begins --> 
 
    <div class="modal-content"> 
 

 
     <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <div class="body-message"> 
 
      <h4>Modal 2 here.</h4> 
 
      <p>How to change this background colour?</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!-- Modal Content: ends --> 
 

 
    </div> 
 

 
</div>

Update

свойства Bootstrap модальностей: -

• shown.bs.modal вызывается, когда ваш модальный открыт
• hidden.bs.modal вызывается, когда ваш модальный открыт

Что я делаю это, когда вы пытаетесь открыть бутстраповской моделируют в DIV с классом modal-backdrop добавлен, и я просто меняю цвет фона так, как вам нравится. И всякий раз, когда вы пытаетесь удалить свою модель, div будет удален. Поэтому вам нужно управлять им каждый раз. И согласно вашему требованию, если у вас есть более двух моделей, то каждый цвет должен быть другим (по крайней мере, то, что я интерпретировал).