当使用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. ld.so.conf 和 ldconfig

    1. 查看执行文件的链接库 ldd 例子: # ldd /sbin/sln not a dynamic executable “not a dynamic executable”是 ldd 说明 sl ...

  2. 安装中文版cacti监控华为交换机流量并实现95计费

    摘要:一． 装置yum源: 以网易yum源为例 1. 下载repo文件 下载地点:http://mirrors.163.com/.help/CentOS6-Base-163.repo 2.备份并调换体 ...

  3. HBase工程师线上工作经验总结----HBase常见问题及分析

    阅读本文可以带着下面问题:1.HBase遇到问题,可以从几方面解决问题?2.HBase个别请求为什么很慢?你认为是什么原因?3.客户端读写请求为什么大量出错?该从哪方面来分析?4.大量服务端excep ...

  4. linux默认编辑器 sublime

    开发人员把Vi improved简称Vim Vim编辑器再内存缓冲区中处理数据. 如果再启动Vim时未指定文件名,或者这个文件不存在,Vim会新开一段缓冲区域来编辑. 如果你再命令行下指定了一个已有文 ...

  5. 通过一道笔试题浅谈javascript中的promise对象

    因为前几天做了一个promise对象捕获错误的面试题目,所以这几天又重温了一下promise对象.现在借这道题来分享下一些很基础的知识点. 下面是一个面试题目,三个promise对象捕获错误的例子,返 ...

  6. ACdream 1017 [分层图][网络流]

    /* 大连热身C题 不要低头,不要放弃,不要气馁,不要慌张 题意: 给一个城市路线图,给定起点给定终点.有n个货物从起点运送到终点.城市的边是无向边. 每个货物每天如果通过某条路,那么这天这条路只能运 ...

  7. Java里Serializable的那些事

    本文为原创文章,欢迎转载,但请注明出处http://www.cnblogs.com/yexiubiao/p/5014015.html,未在文章页面明显位置给出原文连接的,将保留追究法律责任的权利. 通 ...

  8. Lucene学习之一：使用lucene为数据库表创建索引，并按关键字查询

    最近项目中要用到模糊查询,开始研究lucene,期间走了好多弯路,总算实现了一个简单的demo. 使用的lucene jar包是3.6版本. 一:建立数据库表,并加上测试数据.数据库表:UserInf ...

  9. C#获取网页内容的三种方式

    C#通常有三种方法获取网页内容,使用WebClient.WebBrowser或者HttpWebRequest/HttpWebResponse... 方法一:使用WebClient (引用自:http: ...

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

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