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');

作者：doubleyong

公众号：bug收集

博客：bugshouji.com (专门解决与收集bug的网站)

 

如果喜欢这篇文章，可以支持一下哟，分享、点赞、在看 走一个，哈哈@_@