将背景更改为静态以打开引导模式答案

【问题标题】：Change backdrop to static for open bootstrap modal将背景更改为静态以打开引导模式
【发布时间】：2016-08-04 12:58:23
【问题描述】：

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

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

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

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

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

有什么想法吗？

【问题讨论】：

也许我不明白你的用例，但你为什么不使用背景初始化模式：静态和键盘：假？为什么要在它打开时更改它？
因为我所有的其他模态都可以通过退出按钮或在模态外部单击来关闭。我不想只有一个用户无法像其他人一样关闭的模式，我不应该更改所有其他模式。这是特例。在提交时，我在模式上显示微调器，并且我想在微调器处于活动状态时禁用关闭模式。
这是一个有效的用例。打开模态并允许关闭，但是一旦开始某个动作，就阻止模态关闭，直到该动作完成。

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案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 尝试过，但它不起作用。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这里相同...我相信这是引导程序 4 _config。但它有效。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我想出的最简单的方法是附加到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')。）

【讨论】：

preventDefault on hide.bs.modal 是最干净的解决方案，并且在按下 esc 键时也可以使用

【解决方案5】：

您可以在单击模式外部以及 esc 按钮时禁止关闭模式。例如，如果您的模态 ID 是 signUp：

jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';
    jQuery(this).data('bs.modal').options.keyboard = false;
});

【讨论】：

【解决方案6】：

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

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

【讨论】：