关于boostrap的关闭modal时关闭遮罩层问题解决方案 ((前端框架)bootstrap使用入坑记)

模态框使用入坑
这个问题困扰了我很久,百度百了一大圈也没找到合适的解决方案
下面是我自己的解决方案:
模态框代码
关于boostrap的关闭modal时关闭遮罩层问题解决方案 ((前端框架)bootstrap使用入坑记)_第1张图片X关闭按钮的代码


调用模态框的代码


在代码中注意点是:
1.调用模态框按钮上添加 data-backdrop=“static”
2.由于打开模态框后自动生成了如下两个div,我们通过js来控制移除就可以,代码如下

 $(".btn-secondary").click(function () {
      $(".modal-backdrop").remove();
 })
 $(".close").click(function () {
       $(".modal-backdrop").remove();
 })

关于boostrap的关闭modal时关闭遮罩层问题解决方案 ((前端框架)bootstrap使用入坑记)_第2张图片

缺点是:
这样处理后,用户关闭模态框就需要点击右上角的关闭按钮或者下面的关闭按钮才能关掉模态框。
优点是:
完美的解决了弹出层的遮罩层,不会再点击模态框后点不了页面其他部分。

你可能感兴趣的:(bootstrap)