bootstrap 中使用modal模态框遮罩颜色加深

用户9914333

发布于 2022-07-22 14:01:45

1.3K0

发布于 2022-07-22 14:01:45

文章被收录于专栏：bug收集

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-01-07，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap

本文分享自 bug收集微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

bootstrap

登录后参与评论

0 条评论

热度