如何阻止引导模态关闭？

监听hide.bs.modal事件并调用destrest -dextefault（）可阻止bootstrap模态框关闭，适用于表单验证或数据保存中等场景。

有时，您想在某些条件下防止Bootstrap模态关闭 - 例如，当内部的表单中的输入无效或数据仍在保存时。这是您可以阻止Bootstrap模式结束的方法。

听hide.bs.modal事件

Bootstrap在模态开始隐藏之前触发hide.bs.modal事件。您可以收听此事件，并在需要时致电DestrestDefault（）以停止关闭。

 <code>$('#myModal').on('hide.bs.modal', function (e) { // Check your condition if ($('form').has('.invalid-input').length) { e.preventDefault(); // Stops the modal from closing alert('Please fix the errors before closing.'); } });</code>关闭前进行验证<code>$('#myModal').on('hide.bs.modal', function (e) { // Check your condition if ($('form').has('.invalid-input').length) { e.preventDefault(); // Stops the modal from closing alert('Please fix the errors before closing.'); } });</code><h3></h3><p>使用此方法验证表单输入或待处理操作。如果验证失败，请取消关闭操作。</p><font>常见用例：</font>

• 表格包含未保存的更改
• 必需的字段是空的
• 正在进行AJAX请求

<code>let isSaving = false; $('#myModal').on('hide.bs.modal', function (e) { if (isSaving) { e.preventDefault(); alert('Please wait while we save your data...'); } });</code>单击按钮的控制<code>let isSaving = false; $('#myModal').on('hide.bs.modal', function (e) { if (isSaving) { e.preventDefault(); alert('Please wait while we save your data...'); } });</code><h3></h3><p>您还可以通过禁用“关闭”或“取消”等按钮的默认行为来手动控制模态何时关闭，然后使用<strong>.modal（'hide'）</strong>有条件地将其隐藏。</p><font>例子：</font><p></p><pre class="brush:php;toolbar:false"> <code>$('#closeBtn').on('click', function () { if (canClose()) { $('#myModal').modal('hide'); } else { alert('Cannot close right now.'); } });</code>基本上，拦截<code>$('#closeBtn').on('click', function () { if (canClose()) { $('#myModal').modal('hide'); } else { alert('Cannot close right now.'); } });</code><p> <strong>hide.bs.modal</strong>事件并在需要时致电<strong>e.preventdefault（）</strong> 。这是阻止Bootstrap模式结束的最可靠方法。只需确保提供用户反馈，以便他们了解为什么它不会关闭。</p>

以上是如何阻止引导模态关闭？的详细内容。更多信息请关注PHP中文网其他相关文章！