當使用bootstrap模態框默認自帶半透明陰影，如果想要去除陰影，需要怎么做呢？
今天在項目中我遇到了這個問題，想要去除模態框的陰影，試了好久都沒解決。后來問同事的時候才知道，當模態框彈出后，會加上這樣一句代碼：
<div class="modal-backdrop in"></div>
案例：自帶半透明陰影的模態框
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset=UTF-8> 6 <title>自帶半透明陰影的模態框</title> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 8 9 </head> 10 11 <body> 12 <button class="btn btn-primary" type="button" id="test">點擊我顯示模態框</button> 13 14 <div class="modal" id="my-modal-alert"> 15 <div class="modal-dialog"> 16 <div class="modal-content"> 17 <div class="modal-header"> 18 <button type="button" class="close" data-dismiss="modal"> 19 <span aria-hidden="true">×</span><span class="sr-only">Close</span> 20 </button> 21 <h4 class="modal-title" id="modal-title">模態框</h4><span id="num"></span> 22 </div> 23 <!--/*modal-header*/--> 24 <div class="modal-body"> 25 <div id="modal_message">有半透明陰影的模態框</div> 26 </div> 27 <!--/*modal-body*/--> 28 <div class="modal-footer" id="modal-footer"> 29 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> 30 <button type="button" class="btn btn-primary" >保存</button> 31 <!--/*modal-body*/--> 32 </div> 33 <!--/*modal-footer*/--> 34 </div> 35 <!--/*modal-dialog*/--> 36 </div> 37 <!--/*modal-content*/--> 38 </div> 39 <!--/*modal*/--> 40 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 41 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 42 <script> 43 $(function() { 44 $("#test").click(function(){ 45 $("#my-modal-alert").modal("toggle"); 46 }); 47 }); 48 </script> 49 </body> 50 51 </html>
如圖：
要想去除模態框的陰影，只要刪除<div class="modal-backdrop in"></div>這個div元素。
案例：去除模態框的半透明陰影
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset=UTF-8> 6 <title>自帶半透明陰影的模態框</title> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 8 9 </head> 10 11 <body> 12 <button class="btn btn-primary" type="button" id="test">點擊我顯示模態框</button> 13 14 <div class="modal" id="my-modal-alert"> 15 <div class="modal-dialog"> 16 <div class="modal-content"> 17 <div class="modal-header"> 18 <button type="button" class="close" data-dismiss="modal"> 19 <span aria-hidden="true">×</span><span class="sr-only">Close</span> 20 </button> 21 <h4 class="modal-title" id="modal-title">模態框</h4><span id="num"></span> 22 </div> 23 <!--/*modal-header*/--> 24 <div class="modal-body"> 25 <div id="modal_message">有半透明陰影的模態框</div> 26 </div> 27 <!--/*modal-body*/--> 28 <div class="modal-footer" id="modal-footer"> 29 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> 30 <button type="button" class="btn btn-primary" >保存</button> 31 <!--/*modal-body*/--> 32 </div> 33 <!--/*modal-footer*/--> 34 </div> 35 <!--/*modal-dialog*/--> 36 </div> 37 <!--/*modal-content*/--> 38 </div> 39 <!--/*modal*/--> 40 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 41 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 42 <script> 43 $(function() { 44 $("#test").click(function(){ 45 $("#my-modal-alert").modal("toggle"); 46 47 $(".modal-backdrop").remove();//刪除class值為modal-backdrop的標簽，可去除陰影 48 }); 49 }); 50 </script> 51 </body> 52 53 </html>
紅色加粗部分的代碼是用來刪除刪除class值為backdrop的標簽，實現去除陰影的效果。
另外有一個需要注意的地方是，上面紅色加粗部分的代碼只能寫在模態框彈出以后，才能起到效果。原因是，<div class="modal-backdrop in"></div>這句代碼是模態框彈出后才加上去的。
要記得：引入bootstrap.min.js前一定要先引入jquery庫。
另外我還有一個疑問是，當我一開始就設置模態框為show狀態，那么這個時候模態框也是沒有帶半透明陰影的，而當我設置模態框初始為隱藏的，點擊按鈕才彈出時，模態框則會自帶陰影。
如果哪位看到這篇文章，並且正好知道這個問題的答案，還希望您能分享解決方法，解決我的疑惑。謝謝！