Bootstrap Modal 关闭时引起的问题(滚动条和样式残余)

2 篇文章 0 订阅
1 篇文章 0 订阅

我在使用bootstrap3.0时,用了他的modal 功能打开一个模态框时,在关闭modal时,bootstrap没有清除它打开的样式,有余留样式,造成我的页面的滚动条消失了(打开modal前是有滚动条的),代码如下:

        ....省略部分代码

        $("#setRatioModal").modal("hide");

        showRation();//保存后,关闭modal后重新加载部分页面(包括modal的html)

        ....省略部分代码

打开前Dom如下:


关闭modal,并重新加载html后,Modal没有正常关闭,有残余样式和dom结构,如下:

后来询问前端的同事才知道,js虽然单线程往下执行,但当遇到样式渲染、dom操作时,就有同步异步的问题,也就是说,当$("#setRatioModal").modal("hide");执行完,但有可能modal('hide')里面的样式操作,dom操作还没有渲染完,showRation()方法就把页面刷新了或者加入了新的html,页面重新渲染,而modal可能还没有执行完样式删除,modal有样式残余,就出现了这个问题。

解决办法:

1.手动清除残余(这个有点土)

$(".modal-backdrop").remove();
$("body").removeClass('modal-open');


2.使用setTimeout函数调用后面的刷新代码

$("#setRatioModal").modal("hide");

setTimeout(function(){//延时加载页面
      showRation();
},500);


  • 9
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值