[前端]bootstrap 中使用modal模态框遮罩颜色加深

背景：
使用bootstrap + jQuery 做一个后台管理系统， 采用load 方法去加载页面。


问题：
部分页面中的模态框，多次点击显示后，模态框颜色加深，具体说明：学生管理中的添加模态框，直接点击没有问题，但是去班级管理中点击添加模态框后，在点添加学生模态框，就会出现这个问题。


代码实现，直接复制的bootstrap中的模态框的示例，取消时，直接使用 hide 方法进行隐藏


具体如下：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

原因：
不知道为何，产生了多个遮罩层，在显示时，多个遮罩层叠加就让颜色加深。具体产生原因没有找


解决方案：

方法一：不产生重复的遮罩层


没有使用data-target="#myModal"去显示模态框，隐藏也不用hide()方法，改成了js的方式，显示与取消模态框，问题解决。


代码如下：
$("#myModal").modal();   //显示模态框
$("#myModal").modal(‘hide’);  //隐藏模态框


方法二：删除重复的遮罩层
参考：https://www.cnblogs.com/flashman/articles/9875876.html

取消模态框时，写代码去清除所有的遮罩层

代码如下：
$(".modal-backdrop").remove();
$("body").removeClass('modal-open');


如果喜欢这篇文章，欢迎添加右下角“公众号” ，可以第一时间获到文章推送