Bootstrap：关于bootstrap单页面中多Modal的问题

最新推荐文章于 2022-04-13 14:53:51 发布

weixin_34319640

最新推荐文章于 2022-04-13 14:53:51 发布

阅读量231

点赞数

原文链接：https://my.oschina.net/u/2331760/blog/1523291

版权

2019独角兽企业重金招聘Python工程师标准>>>

在单页面中新建用户采用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)，在特定的情况下说不定有出其不意的效果！

网上有个解决思路是改变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();
		}
	}
}

效果图: