具體的引導模態改變模式，背景色/透明度

Question

我有我不能編輯特定模式的造型問題，但僅適用於所有模式使用下面的CSS：

.modal-backdrop {background:red;} 

但又能怎樣我只能改變第二個模態的樣式，但不是全部模態？

Codepen：http://codepen.io/rae0724/pen/woQpqv

Answer 1

您可以使用jQuery & Bootstrap's Modal Events：

• show.bs.modal - 只要你打開模態觸發。
• hidden.bs.modal - 一旦模態完全關閉，觸發。

使用該你做一個10ms延遲和改變backdrop的background-color。像：

// Triggers as soon as 'modal1' Opens 
$('.modal1').on('show.bs.modal', function() { 
    setTimeout(function() { 
    $('.modal-backdrop').css('background', 'red'); 
    }, 10); 
}); 

// Triggers as soon as 'modal1' is closed 
$('.modal1').on('hidden.bs.modal', function() { 
    $('.modal-backdrop').css('background', ''); 
}); 


// Triggers as soon as 'modal2' Opens 
$('.modal2').on('show.bs.modal', function() { 
    setTimeout(function() { 
    $('.modal-backdrop').css('background', 'blue'); 
    }, 10); 
}); 

// Triggers as soon as 'modal2' is closed 
$('.modal2').on('hidden.bs.modal', function() { 
    $('.modal-backdrop').css('background', ''); 
}); 

看一看下面的工作片段：

$('.modal1').on('show.bs.modal', function() { 
 
    setTimeout(function() { 
 
    $('.modal-backdrop').css('background', 'red'); 
 
    }, 10); 
 
}); 
 

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

 
$('.modal2').on('show.bs.modal', function() { 
 
    setTimeout(function() { 
 
    $('.modal-backdrop').css('background', 'blue'); 
 
    }, 10); 
 
}); 
 

 
$('.modal2').on('hidden.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', ''); 
 
});

.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; }

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

 

 
<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> 
 

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

希望這有助於！

Answer 2

下面給出的解決方案是您的要求的補丁。和我想出的最好的東西。我剛剛將Java腳本添加到您的代碼中。我沒有改變你的代碼一個字。 `.modal2.in〜.modal-背景{背景：使用同級選擇像

$(".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>