如何恢复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
相关产品推荐
相关产品推荐

