脚本宝典收集整理的这篇文章主要介绍了BootStrap中模态框踩坑，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在模态框中使用htML标签上的自定义属性来打开模态框后，在使用JS关闭模态框，就会出现多层蒙板问题

出现这个问题的原因就是没有仔细看bootstrap的官方文档，我人麻了，搞了好久

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。

如果你把模态框放到一个JSP页面，然后通过<jsp:include page=""/>标签引过来，也不算是body的直接子元素，如果你硬要把模态框放到其他位置，也有方法做到

网上有的说使用 $(".modal-backdrop").remove();//删除class值为modal-backdrop的标签，可去除阴影来删除蒙板，但是删除完之后会出现滚动条消失，无法点击屏幕的致命bug，这种方法直接pass

我这里的解决办法就是点击按钮里没有模态框目标和转换两个自定义属性，直接使用JS代码来控制打开和关闭模态框，就可以解决

<button class="BTn btn-outline-success addBookTarget">
    添加
</button>

<script>
    $(".addBookTarget").click(() =>{
        $("#addBookModel").modal("show");
    })

    $("#addBook").click(function (){

        alert(1);
        $("#addBookModel").modal("hide");
    });
</script>

官方给的获得模态框对象的方法

// 这里感觉有些麻烦，直接使用上面的就可以了
let myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
myModal.show();
myModal.hide();

最好的办法还是听官方的话，搞这干嘛，花里胡哨的，能用就行

脚本宝典总结

以上是脚本宝典为你收集整理的BootStrap中模态框踩坑全部内容，希望文章能够帮你解决BootStrap中模态框踩坑所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。