问题描述

一个网页中Bootstrap4的modal点击确定时设置hide并且删除对应的HTML。实际运行发现点击确定后页面回残留灰色遮罩层，且屏幕无法滑动。

原因

代码走到$('#' + MODAL_ID').modal("hide")后，下一行就是删除HTML的方法调用。

$('#' + MODAL_ID).modal("hide");
// 已拿到data，删除所有相关HTML
removeHTML();

猜测可能是由于Bootstrap中modal的hide方法是异步的，未执行完毕时突然删除HTML导致有遮罩层残留。

解决方案

将删除HTML的方法调用也设置为异步，并延迟200ms执行。(100好像不行)
将上述代码修改为：

setTimeout('removeHTML()', 200);