Bootstrap使用模态框modal遇到的相关问题

最新推荐文章于 2024-08-21 09:17:03 发布

AcLings

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量792

点赞数

分类专栏：杂文章标签： bootstrap modal 模态框

本文链接：https://blog.csdn.net/baidu_34310405/article/details/103280111

版权

本文讲述了在使用Bootstrap模态框modal时遇到的两个问题：1) 关闭modal后，modal的幕布未能同步消失；2) 关闭第一个modal后，第二次无法打开modal。针对这些问题，提出了两种解决方法：一是通过触发事件或刷新页面去除幕布；二是关闭modal后清除或刷新modal数据，以确保下次能正常打开。

摘要由CSDN通过智能技术生成

1、在关闭modal后，modal的幕布没有一同关闭消失，仍然存在，如图：
在这里插入图片描述

点开F12，可以看到这个modal幕布并没有随着modal消失
解决方法有两个：
a、在关闭modal的时候同时触发一个点击事件，直接把幕布去掉

<button type="submit" class="btn green" onclick="qingchu();">关闭</button>
<script type="text/javascript">
    function qingchu() {
        $('.modal-backdrop').remove();
    }
</script>
这里另一种写法：
<script type="text/javascript">
    $('body').on('hidden.bs.modal', '.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

b、直接刷新页面，简单粗暴，把幕布数据刷新没了