zoukankan      html  css  js  c++  java
  • 去除bootstrap模态框半透明阴影

      当使用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">&times</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">&times</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状态,那么这个时候模态框也是没有带半透明阴影的,而当我设置模态框初始为隐藏的,点击按钮才弹出时,模态框则会自带阴影。

      

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

  • 相关阅读:
    CJOJ 1308 【HNOI 2002 】营业额统计 / CodeVS 1296 营业额统计(STL,二分)
    CJOJ 1131 机器分配 / Luogu 2066 机器分配 (动态规划)
    CJOJ 2482 【POI2000】促销活动(STL优先队列,大根堆,小根堆)
    CJOJ 2484 函数最小值 / Luogu 2085 函数最小值(STL优先队列,堆)
    POJ 2296 Map Labeler / ZOJ 2493 Map Labeler / HIT 2369 Map Labeler / UVAlive 2973 Map Labeler(2-sat 二分)
    Luogu 1111 修复公路(最小生成树)
    POJ 3683 Priest John's Busiest Day / OpenJ_Bailian 3788 Priest John's Busiest Day(2-sat问题)
    POJ 3207 Ikki's Story IV
    洛谷 P1456Monkey King
    洛谷 P1231教辅的组成
  • 原文地址:https://www.cnblogs.com/zuidongfeng/p/5536190.html
Copyright © 2011-2022 走看看