模态框使用入坑
这个问题困扰了我很久,百度百了一大圈也没找到合适的解决方案
下面是我自己的解决方案:
模态框代码
X关闭按钮的代码
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
调用模态框的代码
<button type="button" id="review-create-bnt"
data-toggle="modal" data-target="#exampleModal_review"
data-backdrop="static">Show modal
</button>
在代码中注意点是:
1.调用模态框按钮上添加 data-backdrop=“static”
2.由于打开模态框后自动生成了如下两个div,我们通过js来控制移除就可以,代码如下
$(".btn-secondary").click(function () {
$(".modal-backdrop").remove();
})
$(".close").click(function () {
$(".modal-backdrop").remove();
})
缺点是:
这样处理后,用户关闭模态框就需要点击右上角的关闭按钮或者下面的关闭按钮才能关掉模态框。
优点是:
完美的解决了弹出层的遮罩层,不会再点击模态框后点不了页面其他部分。