BootStrap中模态框踩坑

发布时间:2021-11-23 发布网站:https://www.cnblogs.com/MuggleP
前端之家收集整理的这篇文章主要介绍了BootStrap中模态框踩坑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

BootStrap中模态框踩坑

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

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中模态框踩坑所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。