打开时更改 Bootstrap 模态背景设置

Posted 2023-02-22

【中文标题】打开时更改 Bootstrap 模态背景设置

【英文标题】：Change Bootstrap modal backdrop settings while open

【发布时间】：2017-05-16 05:18:51

【问题描述】：

我正在尝试将模式的背景设置更改为“静态”作为对事件的响应，以便它变得不可关闭。我在单击模式内的按钮后通过设置$('#myModal').modal( backdrop: 'static',keyboard:false ) 尝试了此操作，但没有运气。

我想要的效果类似于nakupanda's bootstrap-dialog 的效果（请参阅操作按钮部分，当dialog.setClosable(true); 在单击“单击以禁用和旋转”按钮时触发时，模态不再可关闭）

请看这个jsfiddle。

我知道这个问题已经被问过here，但它没有正确的答案。我知道这是可能的，但我无法分析 nakupanda 的代码。

【问题讨论】：

Change backdrop to static for open bootstrap modal的可能重复

【参考方案1】：

对于尝试在 v4 上执行此操作的任何人，您需要进行更改：

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

到

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

【参考方案2】：

您为什么不在页面加载时使用选项而不是在按钮单击时初始化模式？

只需定义一个文档准备好的 fn 并将下面的代码放入其中。

$('#myModal').modal(
    backdrop: 'static',
    keyboard: false
  )

【讨论】：

是的，我可以这样做，但这违背了问题的目的。在单击按钮之前，模式应该仍然是可关闭的。

【参考方案3】：

我想出了一个解决方案。问题是即使您将背景设置为静态，仍然有一个点击监听器。

我的解决方案在这里。 https://jsfiddle.net/25zbf094/2/

javascript

$('#makeIndismissable').click(function()
  $('#myModal').prop('onclick',null).off('click');
);

$('#close').click(function()
    $('#myModal').modal("hide")
)

我基本保持 html 不变，但在关闭按钮中添加了“关闭”的 id。正如您在上面看到的，您仍然可以通过按右上角的 X 来关闭模态框。

【参考方案4】：

尝试改变modal的选项如下：

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

这是working example

【讨论】：

这是最好的答案。

这是解决问题的最佳方案。尊敬的先生。

@JamesA Kudos 和快乐编码.. :)

谢谢！多年来一直在寻找如何做到这一点！

@JohnDoe.. 随时.. 快乐编码.. :)

【参考方案5】：

你可以试试这样的：http://codepen.io/bwobst/pen/GrKBKy?editors=1010

$('#open-modal').click(function(evt) 
  $('#myModal').modal(backdrop: 'static');
  $('.modal button').prop('disabled', true);
);

当您单击“打开模式”按钮时，它会将背景设置为静态并禁用模式中的按钮。