bootstrap模态框跳转后 框消失了而背景存在问题的解决方法

一、方法：

/** 用于去除关闭模态框后留下的暗背景* */function removeBackground(){    $('.modal-backdrop').remove();    $('body').removeClass('modal-open');}

二、原理：

  这是我在写一个项目的考勤打卡模块遇到的问题，需求是：设置考勤规则时需要设置一个打卡位置，

我用了百度地图的API，设置打卡位置时，在页面通过Bootstrap模态框的形式弹出一个地图，供用户

选取位置。但是设置好打卡规则后，修改打卡规则时需要先弹出一个模态框用来回显考勤时间等考勤规

则信息，然后在打卡位置后面有一个<a>链接来修改打卡位置，当点击这个<a>链接时需要在已经弹出的

模态框的基础上再弹出一个选取打卡位置的地图模态框，并且在地图模态框中选取完新的打卡位置并点

击确定后返回之前的回显考勤规则的模态框，最后点击回显考勤规则的模态框中的确定完成考勤规则的

修改，但是当点击确定准备完成修改时发现点击确定后模态框消失了但是弹出模态框时留下的暗背景却

依然留在屏幕上，在网上查了很多资料依然没能解决，这是我灵机一动何不看一看带有暗背景的HTML页

面与正常HTML页面有什么区别，经过对比发现带暗背景的页面比正常HTML页面多了两个

class=modal-backdrop的class，并且body上多了class=modal-open,于是我写了个js方法，当点击确定

或者取消时调用，用来删掉这两个div和body上的class，至此问题圆满解决。

三、补充：

因为我在同一页面连续弹了两个模态框所以多出来两个class=modal-backdrop的div，如果只

弹出一个模态框就只多出一个这样的div，

其中class=modal-backdrop的div时屏幕上的暗背景，body上的class=modal-open的作用是使

我们不能对页面进行正常操作