如何更改2種不同的Bootstrap Modals背景顏色？

Question

創建Bootstrap模式時，將.modal-backdrop添加到HTML的末尾以創建背景顏色。我可以通過改變這個類的顏色來手動切換顏色，但是我想根據兩個模態中的哪一個被觸發來切換該類的顏色。

我目前使用兄弟選擇器來嘗試區分我想要的顏色，但無論調用哪種模式，它現在顯示＃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>

更新

屬性： -

• shown.bs.modal當你的模式打開
• hidden.bs.modal當你的模式打開

我在做什麼，每當你嘗試打開一個引導模式與階級一個div被激發被觸發添加模式背景，我只是簡單地將背景的顏色更改爲任何你喜歡的顏色。每當你試圖刪除你的模型div將被刪除。所以你需要每次管理它。根據你的要求，如果你有更多的兩個模型，那麼每個人的顏色應該是不同的（至少我所解釋的）。