You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何恢复Bootstrap已设为不可关闭模态框的可关闭性?

Bootstrap 3.4.1 模态框不可关闭设置后无法恢复的问题
  • 我使用以下代码将Bootstrap 3.4.1的模态框设置为不可关闭状态——禁止用户点击模态框外部或按Esc键关闭,但保留.modal("hide")和data-dismiss="modal"的正常功能:
$('#myModal').removeData('bs.modal')
    .modal({
        backdrop: 'static',
        keyboard: false
    });
  • 但尝试直接传入反向参数恢复模态框的可关闭性时,发现完全无效,模态框仍处于不可关闭状态:
$("#myModal").modal({
    backdrop: true,
    keyboard: true
});
  • 之后我尝试借助hide.bs.modal事件处理器,通过读取模态框的data-allow-close属性来判断是否允许通过键盘/鼠标操作关闭模态框:
    事件绑定逻辑:
attachNonClosableModalHideHandler: function() {
    const $self = $(this);
    $("#myModal").on("hide.bs.modal", $self.handleNonClosableModalHide);
},

handleNonClosableModalHide: function () {
    return $(this).data("allow-close");
}

模态框的HTML结构:

<div id="myModal" class="modal default fade" tabindex="-1" 
     role="dialog" data-allow-close="true">...</div>
  • 但这个事件处理器带来了新问题:$("#myModal").modal("hide")和模态框内带data-dismiss="modal"属性的关闭按钮都无法正常工作,必须先手动设置allow-close数据属性才行。我为此写了一个jQuery插件作为隐藏模态框的包装,但操作过于繁琐。恢复模态框的可关闭性不该这么复杂,请问我哪里出错了?

内容的提问来源于stack exchange,提问作者Alex

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 14:52:22