在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 = $(document.createElement('div')) .addClass('modal-backdrop ' + animate) .appendTo(this.$body) ...... }
后面还有balabala一大串，但这些就足够分析了。在单击modal后会有一个叫modal-backdrop的div层apped到body之后，那言下之意是不管开几个modal都会不断的向body后append! ╮(╯_╰)╭ ！怎么能这样。。。然后我简单对modal-backdrop进行处理，如下：
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的时候页面会刷新。其实有的时候我们也可以根据项目需要自行编写遮罩层(也就是模拟modal的效果，网上资料叫mask-div)，在特定的情况下说不定有出其不意的效果！
前面还说到有多余滚动条的问题，因为这个问题当时做毕设没有深究而到了新公司换了新设备已经没有这个问题了so我就偷了下懒。不过我相信没有攻读源码还解决不了的bug，如果有那就再度一遍源码吧。。。###
update by George 2016-12-6 9:43
多滚动条(即收缩感问题)，当时没有解决现在又遇到了。自己了看源码发现在modal出现时对body进行了样式的修改,具体如下：
<pre><code>
body{
overflow:auto;overflow-y:scroll;
}
</pre></code>
在网上查了下是因为让不同浏览器下的modal样式统一，╮(╯▽╰)╭还是自己太年轻没想到，下来的事就是阻止bootstrap调用modal的默认样式了，还是自己当时一头钻进了怎么改样式的死胡同而没有想到查看官方api找到对应的事件......
<code>
Modal.prototype.adjustBody_beforeShow = function(){
var body_scrollHeight = $('body'[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
$('body').css({ 'overflow' : 'hidden', 'margin-right' : '15px' });
$('.modal').css({'overflow-y':'scroll'})
}else{
$('body').css({ 'overflow' : 'auto', 'margin-right' : '0' });
$('.modal').css({'overflow-y':'auto'})
} }
Modal.prototype.adjustBody_afterShow = function(){
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
$('body').css({ 'overflow' : 'auto', 'margin-right' : '0' });
}else{
$('body').css({ 'overflow' : 'auto', 'margin-right' : '0' });
} }
</code>
调用的时候：
<code>
Modal.prototype.show = function (_relatedTarget) {
this.adjustBody_beforeShow();
//...other code
}
Modal.prototype.hide = function (e) {
this.adjustBody_afterShow();
//...other code
}
</code>
其实这个代码还有能改进的地方，这里只是放出来提醒自己思考的时候不能钻进胡同应适当转换角度思考。
偷师资料：解决Bootstrap模态框切换时页面抖动 or页面滚动条
网友评论