Question

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

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

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

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

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

有什么想法吗？

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

You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';
    jQuery(this).data('bs.modal').options.keyboard = false;
});

Answer 3

我提出的最简单的方法是附加到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); }。这在技术上并没有将背景设置为静态，但它以可切换的方式实现了相同的效果。

.modal('hide')

（免责声明，我没有测试制作按钮是否允许隐藏模态，因为这不是我的情景。如果它不起作用，只需从{click()调用{ {1}}回调。）

Answer 4

我有一个可以用2种不同方式打开的模式。当用户以一种方式打开它时，我希望他们能够关闭模式。当他们以另一种方式打开它时，我不希望他们能够将其关闭。

我找到了这个问题，并使用了原始海报中的解决方案。我还尝试添加现在可以使用的键盘：

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

Answer 5

我返回了另一个JavaScript对象，因此有以下解决方案：

$myModal.data("bs.modal")._config.backdrop = value;

Answer 6

我发现，在 Bootstrap 5 中，这略有不同：

modal = new bootstrap.Modal($('.modal'));
modal._config.backdrop = 'static'; // or true

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

6 个答案: