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

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

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

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

　　

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset=UTF-8>

         <title>自带半透明阴影的模态框</title>

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

     </head>

     <body>

         <button class="btn btn-primary" type="button" id="test">点击我显示模态框</button>

         <div class="modal" id="my-modal-alert">

             <div class="modal-dialog">

                 <div class="modal-content">

                     <div class="modal-header">

                         <button type="button" class="close" data-dismiss="modal">

                                 <span aria-hidden="true">&times</span><span class="sr-only">Close</span>

                             </button>

                         <h4 class="modal-title" id="modal-title">模态框</h4><span id="num"></span>

                     </div>

                     <!--/*modal-header*/-->

                     <div class="modal-body">

                         <div id="modal_message">有半透明阴影的模态框</div>

                     </div>

                     <!--/*modal-body*/-->

                     <div class="modal-footer" id="modal-footer">

                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                         <button type="button" class="btn btn-primary" >保存</button>

                         <!--/*modal-body*/-->

                     </div>

                     <!--/*modal-footer*/-->

                 </div>

                 <!--/*modal-dialog*/-->

             </div>

             <!--/*modal-content*/-->

         </div>

         <!--/*modal*/-->

         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

         <script>

             $(function() {

                 $("#test").click(function(){

                     $("#my-modal-alert").modal("toggle");

                 });

             });

         </script>

     </body>

 </html>

　　如图：

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

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

　　

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset=UTF-8>

         <title>自带半透明阴影的模态框</title>

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

     </head>

     <body>

         <button class="btn btn-primary" type="button" id="test">点击我显示模态框</button>

         <div class="modal" id="my-modal-alert">

             <div class="modal-dialog">

                 <div class="modal-content">

                     <div class="modal-header">

                         <button type="button" class="close" data-dismiss="modal">

                                 <span aria-hidden="true">&times</span><span class="sr-only">Close</span>

                             </button>

                         <h4 class="modal-title" id="modal-title">模态框</h4><span id="num"></span>

                     </div>

                     <!--/*modal-header*/-->

                     <div class="modal-body">

                         <div id="modal_message">有半透明阴影的模态框</div>

                     </div>

                     <!--/*modal-body*/-->

                     <div class="modal-footer" id="modal-footer">

                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                         <button type="button" class="btn btn-primary" >保存</button>

                         <!--/*modal-body*/-->

                     </div>

                     <!--/*modal-footer*/-->

                 </div>

                 <!--/*modal-dialog*/-->

             </div>

             <!--/*modal-content*/-->

         </div>

         <!--/*modal*/-->

         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

         <script>

             $(function() {

                 $("#test").click(function(){

                     $("#my-modal-alert").modal("toggle");

                     $(".modal-backdrop").remove();//删除class值为modal-backdrop的标签，可去除阴影

                 });

             });

         </script>

     </body>

 </html>

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

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

　　

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

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

　　

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

去除bootstrap模态框半透明阴影的更多相关文章

  1. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  2. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  3. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  4. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  5. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  6. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  7. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  8. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  9. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

随机推荐

  1. MySql自增长列

    1. 关键字 auto_increment 2. 自增用法 a) create table test(tid int auto_increment, tname varchar(10), primar ...

  2. [Linux] IP绑定解释 BindIp

    一.缘由: 今天安装Mongodb,本来想限制只能内网或者某几台机器可以访问,看到配置文件有个net.bindIp选项, 就自以为是的认为,他可以像nginx那样限制访问来源IP,其实大错特错.这里配 ...

  3. HTTP返回码总结（转）

    HTTP协议状态码表示的意思主要分为五类 ,大体是 :   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~  1×× 保留   2×× 表示请求成功地接收   3×× 为完成请求客户需进一步 ...

  4. Scala的几个小tips

    1. Main方法只能写在object而不是class里 2. Unit test只能针对class或者trait,不能给object做,解决方法,把object里面要测的方法拿出来放到trait里, ...

  5. source 源码下载

    http://blog.csdn.net/zlgydx/article/details/50781258 经常需要查看某些第三方的源码,一直在用的一个网站,功能比较简介.好用. http://grep ...

  6. queue

    http://www.codeforces.com/contest/625/problem/E

  7. [转] 主流JS框架中DOMReady事件的实现

    在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等.原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完 ...

  8. percent的用法

    select*from test; 先查询所有的结果一共是8条记录 select top(50)  percent *from test; 则只查询该表中百分之50的结果集

  9. tomcat8和7关于自定义tag的处理区别

    今天将一直运行在tomcat-7.0.29(jdk1.6)上的应用迁移到tomcat-8.0.26(jdk1.7)上面,老显示如下错误: org.apache.jasper.JasperExcepti ...

  10. （转）C语言_测试程序运行内存状态GlobalMemoryStatus使用案例

    在做毕业设计的时候,需要验证算法的空间复杂度,C语言网上都说是用GlobalMemoryStatus这个函数,但是网上却没有这个函数的使用实例,也有人说是用内存分析器的东西,但是这个显然是不靠谱的. ...