Bootstrap Modal 关闭时引起的问题

来源:互联网 发布:plsql导出单个表数据 编辑:程序博客网 时间:2024/06/05 00:11

我在使用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()方法就把页面刷新了,所以造成了modal有样式残余。

解决办法:

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

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


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

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

setTimeout(function(){
      showRation();
},500);


2 0
原创粉丝点击