BootStrap中模态框踩坑

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

BootStrap中模态框踩坑-LMLPHP

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

BootStrap中模态框踩坑-LMLPHP

务必将模态框的 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();

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

.Muggle

BootStrap中模态框踩坑