当使用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. iOS 跳转至AppStore评分页面

    iOS7之前: [[UIApplication sharedApplication]openURL:[NSURL URLWithString:@"itms-apps://ax.itunes. ...

  2. VS2013，VS2015设置类模板文件表头

    一般VS的类模板文件是放在C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTemplatesCache\CSha ...

  3. 支持ASP.NET WebService

    ASP.NET WebService默认返回的数据格式是XML,但也能返回JSON格式. 如何让MiniUI组件支持ASP.NET WebService? 只需要: 1) 引用miniui-webse ...

  4. XE6 & IOS开发之开发者账号、苹果证书（1）：关于开发者账号

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 关于苹果开发者账号, 注 ...

  5. 【转】MySQL数据丢失讨论

    原文http://blog.sae.sina.com.cn/archives/4091 1.   概述 很多企业选择 MySQL都会担心它的数据丢失问题,从而选择Oracle,但是其实并不十分清楚什么 ...

  6. Combobox

    1.方式一 <select id="cc" class="easyui-combobox" name="dept" style=&qu ...

  7. Android RelativeLayout用到的一些重要的属性

    转载自 http://mobile.51cto.com/android-265842.htm 第一类:属性值为true或false android:layout_centerHrizontal  水平 ...

  8. 单片机联网需求攀升 WIZnet全硬件TCP/IP技术崛起

    --新华龙电子为韩国WIZnet公司网络芯片授权代理商,具有20多年的专业团队IC应用开发实力-- 如今不管是在企业还是小区.街道,甚至是居民室内,以太网接口无处不在.有鉴于此,电子设备必将向更加智能 ...

  9. Asprise-OCR的使用

    Asprise-OCR下载地址: http://asprise.com/product/ocr/download.php?lang=csharp 其中需要使用的3个dll是AspriseOCR.dll ...

  10. 【转】伪静态URLRewrite学习笔记

    UrlRewrite: UrlRewrite就是我们通常说的地址重写,用户得到的全部都是经过处理后的URL地址,类似于Apache的mod_rewrite.将我们的动态网页地址转化为静态的地址,如ht ...