在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条，覆盖整个body的阴影瞬间变暗。真的是哔了dog，如今在公司又出现了阴影的问题所以我观察了源码后发现 ，bootstrap.js文件中modal的遮罩层函数如下：

Modal.prototype.backdrop = function (callback) {var that = thisvar 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)，在特定的情况下说不定有出其不意的效果！

网上有个解决思路是改变z-index,这个方法测试过,弹出modal框没问题,只是在弹出多次modal框之后,后面背景会加深,都看不到被遮盖的页面了:

$(document).ready(function() {// 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面$(document).on('show.bs.modal', '.modal', function() {//貌似这里始终为0,获取不到$('.modal:visible')的jquery对象,因为这个时候modal遮盖层还没有显示出来var zIndex = 1040 + (10 * $('.modal:visible').length);$(this).css('z-index', zIndex);setTimeout(function() {//在遮盖层被赋予样式显示出来之后再执行该方法(这里$('.modal-backdrop').not('.modal-stack')可能有多个,弹出多次modal框之后,页面被多个遮盖层覆盖)$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');//改进的方法,只保留一个,其余移除样式应该可以,没测试过.../*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();}}*/}, 0);});
});

多滚动条(即收缩感问题)

看源码发现在modal出现时对body进行了样式的修改,具体如下：

　　body{　　　　overflow:auto;overflow-y:scroll;　　}

在网上查了下是因为让不同浏览器下的modal样式统一，╮(╯▽╰)╭还是自己太年轻没想到，下来的事就是阻止bootstrap调用modal的默认样式了，还是自己当时一头钻进了怎么改样式的死胡同而没有想到查看官方api找到对应的事件......

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' });}
}

调用的时候：

Modal.prototype.show = function (_relatedTarget) {this.adjustBody_beforeShow();//...other code
}
Modal.prototype.hide = function (e) {this.adjustBody_afterShow();//...other code
}

实例:

删除框,在点击的时候,弹出"是否删除"对话框:

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-content" ng-transclude=""><div bindonce="" class="ng-scope"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" data-ng-click="close(false)" aria-hidden="true">×</button><h5 class="modal-title ng-binding">提示</h5></div><div class="modal-body"><div><span class="text-size-32 icon-warning-1 text-info" style="color: #09c !important"></span> <span style="display:inline;margin-bottom: 10px;margin-left: 10px;vertical-align:6px;font-size: 18px" bo-bind="'invoice.directive.addressListAction.sureCancelAddress'|translate">确定要删除这条发票信息吗？</span></div></div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteFun();">确定</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div></div></div></div></div></div>

删除按钮:

<a class="btn-sm btn-primary" onclick="modifyBtnClickToInfo(this);return false;" uid="${ssoInvoice.id}">修改</a>
<a class="btn-sm btn-primary" onclick="deleteBtnClickToInfo(this);return false;" uid="${ssoInvoice.id}" >删除</a>

javascript:

/*设定被删除的元素的ID值*/
function deleteBtnClickToInfo(dom){deleteSsoInvoiceId = $(dom).attr('uid');$("#deleteModal").modal('show');removeModalBackdrop();
}/*保留一层遮盖层,移除其他遮盖层*/
function removeModalBackdrop(){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: