去除BOOTSTRAP模态框半透明阴影
2017-04-10 23:24
309 查看
当使用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">×</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">×</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状态,那么这个时候模态框也是没有带半透明阴影的,而当我设置模态框初始为隐藏的,点击按钮才弹出时,模态框则会自带阴影。
如果哪位看到这篇文章,并且正好知道这个问题的答案,还希望您能分享解决方法,解决我的疑惑。谢谢!
相关文章推荐
- 去除BOOTSTRAP模态框半透明阴影
- 去除BOOTSTRAP模态框半透明阴影
- 去除bootstrap模态框半透明阴影
- bootstrap去除弹出模态框背后的阴影
- 去除Bootstrap模态框背景变暗效果
- 关于bootstrap模态框被灰色阴影遮罩挡住问题的分析
- 关于bootstrap中轮播两边阴影的去除方法
- 去除 bootstrap 中轮播两边阴影
- angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习
- React Native Android ScrollView 去除阴影效果
- android shape的使用详解以及常用效果(渐变色、分割线、边框、半透明阴影效果等)
- Bootstrap 模态框(Modal)插件数据传值
- 去除button点击下去的 灰色阴影效果
- UIWebView 去除阴影
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
- 基于jquery-ui及bootstrap的可拖拽模态框
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- 去除电脑桌面上的图标阴影(变蓝)
- bootstrap3 模态框(以后要坚持写博客)
- Bootstrap模态框禁用空白处点击关闭