关于bootstrap单页面中多Modal的问题
2016-07-05 14:50
471 查看
在web苦海中前行真的是一件十分煎熬但又开心的事,煎熬是因为时常被小bug和杂七杂八的兼容性影响,而开心是因为终于大学毕业可以拿转正工资了。
步入正轨,在做毕设时我在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变暗。真的是哔了dog,如今在公司又出现了阴影的问题所以我观察了源码后发现 ,bootstrap.js文件中modal的遮罩层函数如下:
Modal.prototype.backdrop = function (callback) { var that = this var animate = this.$element.hasClass('fade') ? 'fade' : '' if (this.isShown && this.options.backdrop) { var doAnimate = $.support.transition && animate this.$backdrop = 4000 $(document.createElement('div')) .addClass('modal-backdrop ' + animate) .appendTo(this.$body) ... }
后面还有balabala一大串,但这些就足够分析了。在单击modal后会有一个叫modal-backdrop的div层apped到body之后,那言下之意是不管开几个modal都会不断的向body后append
,啊!怎么能这样。。。然后我简单对modal-backdrop进行处理,如下:
/** * Created by George on 2016/7/5. */ document.getElementById('ta').addEventListener('click' , function(){ $('#myModal').modal('show'); }); document.getElementById('tt').addEventListener('click' , function(){ $('#myModal1').modal('show'); /* $('#myModal').modal('hide'); */ console.log($('.modal-backdrop').length) console.log($('.modal-backdrop')) var iLen = $('.modal-backdrop').length; for(var i = 0; i<iLen;i++){ $('.modal-backdrop')[i].id = 'modal'+i; } if(iLen>1){ for(var i =1;i<2;i++){ $('#modal'+i).removeClass(); } } });
为每个modal-backdrop对应的div添加个id,然后找到这个div将.modal-backdrop这个removeClass()掉就行。在这里肯定会有小伙伴说不论是几个那只需要在显示当前modal的时候把剩下的hide不就可以了么?这个办法我也试了试如上代码前6行,这样做确实能达到阴影不加深的效果但是用户体验会差很多,因为hide的时候页面会刷新。
前面还说到有多余滚动条的问题,因为这个问题当时做毕设没有深究而到了新公司换了新设备已经没有这个问题了so我就偷了下懒
。不过我相信没有攻读源码还解决不了的bug,如果有那就再度一遍源码吧。。。
相关文章推荐
- django2.0关于path匹配路径页面刷新不出来的问题
- 关于页面执行效率的问题
- 求助!关于页面打印的问题
- C#.net关于生成html静态页面的问题
- 关于在eclipes中配置tomcat不能显示主页面问题
- 关于PHP页面跳转出现SESSION丢失问题
- 关于fonts.useso.com导致的页面加载过慢问题
- 关于OpenLDAPAdmin管理页面提示“This base cannot be created with PLA“问题
- 请问页面上关于时间校验问题。
- 关于获取到页面顶部的距离的兼容问题
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
- 关于js在有模板的页面中如何取值问题?
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
- 关于Asp.net页面Page_Load被执行两次的问题
- 关于页面的 回退问题 locastorage和sessionStorage的区别
- 关于HTML页面接收前页面传值,并将值传给下一个页面的问题
- 关于使用.net页面刷新时的问题下拉列表框值改变时,页面动态刷新
- 关于两个页面之间传值,和打开新的页面的问题
- 关于在.net中web表单 在textbox 中回车页面提交问题的解决方案
- 关于EL${}在jsp页面不显示的问题