Bootstrap 模态框(Modal)modal('hide') 失效不能隐藏的解决方法

原创 HuangLongPu     发表于  2021-03-12 13:47       528

Bootstrap 的 API 有写:

modal('show') 用于手动打开模态框

$('#identifier').modal('show')

modal('hide') 用于手动隐藏模态框

$('#identifier').modal('hide')

奇怪现象,执行 modal('show') 方法,弹出模态框。然后,执行 modal('hide') 方法时,模态框并未关闭……

经过排查发现,主要有两方面的原因引起:

1、模态框的结构不完整,至少需要同时包含 modal、modal-dialog、modal-body 等三层结构,参考如下:

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    <div class="modal-dialog">
        <div class="modal-body">
            这里放置模态框内容
        </div>
    </div>    
</div>

2、modal('show') 和 modal('hide') 执行间隔时间不能太短,否则不生效,采用延迟执行 modal('hide') 的方式解决。

// 设置延迟1秒后执行 .modal('hide') 方法setTimeout(function(){
    $('#loadingModal').modal('hide');
},1000);