将背景更改为静态以用于打开引导模式

我的模态打开时，我可以将背景更改为“静态”吗？

我有表单提交按钮的模态。 当我单击此按钮时，我会在我的模态上显示加载微调器，这是我想要将背景更改为静态的时刻

我尝试了$('#myModal').modal({backdrop: 'static', keyboard: false}) ，但我仍然可以通过单击背景或使用转义按钮来关闭我的模态。

第二步应该是将背景改回真实，但我还没有尝试过，因为首先我需要将背景设置为静态。

我可以在模态显示中将背景设置为静态，但我想避免这种情况并在提交后更改它。

有任何想法吗？

Answer 1

好的我解决了这个问题 也许它不是最好的解决方案，但它适用于我的特殊情况。

我添加了$('#myModal').off('click'); 就在我在提交时显示加载微调器之后。 这可以防止鼠标单击关闭模式。

禁用escape按钮时出现问题，因为当用户按此按钮时，浏览器会停止加载页面。 所以我决定隐藏微调器以使用以下代码解锁表单：

 $(document).on('keydown',function(e) { if (e.keyCode == 27) { $('#myLoadingSpinner').hide(); } }); 

编辑：我找到了另一种背景解决方案：

 $('#myModal').data('bs.modal').options.backdrop = 'static'; 

我也试过这个也用于keyboard = false ，但它不起作用。

Answer 2

我提出的最简单的方法是附加到hide.bs.modal事件并调用preventDefault() 。 这在技术上并不将背景设置为静态，但它以可切换的方式实现相同的效果。

 let $myModal = $('#myModal'); function preventHide(e) { e.preventDefault(); } // if you have buttons that are allowed to close the modal $myModal.find('[data-dismiss="modal"]').click(() => $myModal.off('hide.bs.modal', preventHide)); function disableModalHide() { $myModal.on('hide.bs.modal', preventHide); } function enableModalHide() { $myModal.off('hide.bs.modal', preventHide); } 

（免责声明，我没有测试制作按钮是否允许隐藏模态，因为那不是我的场景。如果它不起作用，只需从click()回调中调用.modal('hide') 。）