当使用bootstrap模态框默认自带半透明阴影，如果想要去除阴影，需要怎么做呢？

　　今天在项目中我遇到了这个问题，想要去除模态框的阴影，试了好久都没解决。后来问同事的时候才知道，当模态框弹出后，会加上这样一句代码：

　　<div class="modal-backdrop  in"></div>

 

　　案例：自带半透明阴影的模态框

　　

1  2  3  4      5         
      6          7         
      8  9     10 11     12         点击我显示模态框13 14         
     
      15             
      
       16                 
       
        17                     
        
         18                         
         19                                 ×Close20                             21                         
         
模态框
         22                     
        
23                     
        24                     
        
         25                         
         
          有半透明阴影的模态框
         
26                     
        
27                     
        28                     
        
         29                         
         关闭30                         
         保存31                         
         32                     
        
33                     
        34                 
       
35                 
       36             
      
37             
      38         
     
39         
     40         41         42         49     50 51 

 

　　如图：

 

　　　要想去除模态框的阴影，只要删除<div class="modal-backdrop in"></div>这个div元素。

 

　　案例：去除模态框的半透明阴影

　　

1  2  3  4      5         
      6          7         
      8  9     10 11     12         点击我显示模态框13 14         
     
      15             
      
       16                 
       
        17                     
        
         18                         
         19                                 ×Close20                             21                         
         
模态框
         22                     
        
23                     
        24                     
        
         25                         
         
          有半透明阴影的模态框
         
26                     
        
27                     
        28                     
        
         29                         
         关闭30                         
         保存31                         
         32                     
        
33                     
        34                 
       
35                 
       36             
      
37             
      38         
     
39         
     40         41         42         51     52 53 

　　红色加粗部分的代码是用来删除删除class值为backdrop的标签，实现去除阴影的效果。

 

　　另外有一个需要注意的地方是，上面红色加粗部分的代码只能写在模态框弹出以后，才能起到效果。原因是，<div class="modal-backdrop  in"></div>这句代码是模态框弹出后才加上去的。

　　

　　要记得：引入bootstrap.min.js前一定要先引入jquery库。

 

　　另外我还有一个疑问是，当我一开始就设置模态框为show状态，那么这个时候模态框也是没有带半透明阴影的，而当我设置模态框初始为隐藏的，点击按钮才弹出时，模态框则会自带阴影。

　　

　如果哪位看到这篇文章，并且正好知道这个问题的答案，还希望您能分享解决方法，解决我的疑惑。谢谢！