当使用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. java 命令notes

    jps:查看本机的Java中进程信息. jstack:打印线程的栈信息,制作线程Dump. jmap:打印内存映射,制作堆Dump. jstat:性能监控工具. jhat:内存分析工具. jconso ...

  2. BeanFactory vs ApplicationContext

    <ref:https://techythought.wordpress.com/2013/01/12/92/>

  3. CentOS下Apache配置多域名或者多端口映射

    CentOS下Apache默认网站根目录为/var/www/html,假如我默认存了一个CI项目在html文件夹里,同时服务器的外网IP为ExampleIp,因为使用的是MVC框架,Apache需开启 ...

  4. 百度地图API功能集锦

    1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能 ...

  5. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  6. Maven依赖版本冲突的分析及解决小结

    1:前言 做软件开发这几年遇到了许多的问题,也总结了一些问题的解决之道,之后慢慢的再遇到的都是一些重复性的问题了,当然,还有一些自己没有完全弄明白的问题.如果做的事情是重复的,遇到重复性问题的概率也就 ...

  7. 所有古诗词的api

    服务商:api.getlove.cn 分类:诗词 更新时间:2016-03 如果接口不满足您的要求,您可以联系qq:2265658022购买完整的数据库 免费apikey:56eab527a0facb ...

  8. Linux 性能监控之命令行工具

    引言 对于系统和网络管理员来说每天监控和调试Linux系统的性能问题是一项繁重的工作.这些命令行工具可以在各种Linux系统下使用,可以用于监控和查找产生性能问题的原因.这个命令行工具列表提供了足够的 ...

  9. C/C++程序员应聘试题剖析（转载）

    转载自:http://www.cnitblog.com/zouzheng/articles/21856.html 1.引言 本文的写作目的并不在于提供C/C++程序员求职面试指导,而旨在从技术上分析面 ...

  10. opendove中的odgw所需要的内核模块

    最近组里要做opendove相关的东西,需要odgw的一个kernel-module. 以前安装过,但备份不见了,在此做个链接备忘 : https://git.opendaylight.org/ger ...