使用 bootstrap jQuery 做一个后台管理系统， 采用load 方法去加载页面。
01
问 题
部分页面中的模态框，多次点击显示后，模态框颜色加深，具体说明：学生管理中的添加模态框，直接点击没有问题，但是去班级管理中点击添加模态框后，在点添加学生模态框，就会出现这个问题。
代码实现，直接复制的bootstrap中的模态框的示例，取消时，直接使用 hide 方法进行隐藏
代码：
代码语言：javascript复制<!-- 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>02
原 因
不知道为何，产生了多个遮罩层，在显示时，多个遮罩层叠加就让颜色加深。具体产生原因没有找
03
解决方案
方法一：不产生重复的遮罩层
没有使用data-target="#myModal"去显示模态框，隐藏也不用hide()方法，改成了js的方式，显示与取消模态框，问题解决。
代码如下：
代码语言：javascript复制$("#myModal").modal(); //显示模态框
$("#myModal").modal(‘hide’); //隐藏模态框方法二：删除重复的遮罩层
参考：
https://www.cnblogs.com/flashman/articles/9875876.html 取消模态框时，写代码去清除所有的遮罩层 代码如下：
代码语言：javascript复制$(".modal-backdrop").remove();
$("body").removeClass('modal-open');
