Bootstrap 模态背景 = 'static' 不工作

Question

首先，我用这个打开我的模态：

$('#myModal').modal('show');

然后，在另一种情况下，我需要在外部按下 ESC/clicking 时不关闭相同的模式，所以我使用这个：

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

但是一旦我用第一种方法打开我的模式，第二种方法就不起作用了。有什么提示吗？

如何强制 backdrop 值开关起作用？

Answer 1

我找到了解决此问题的方法。

一旦模态框被隐藏 bootstrap 数据仍然保留在上面。为了防止我有以下内容：

$('#myModal').modal('show'); //display something
//...

// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide'); 
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...

// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});

Answer 2

类似于Daniele Piccioni但更简洁：

$('#myModal').modal({backdrop: true, keyboard: false, show: true});
$('#myModal').data('bs.modal').options.backdrop = 'static';

这是给Bootstrap 3.+

的

另请参阅：Change Bootstrap modal option once it already exists

Answer 3

我在 Bootstrap 4.1.1 中遇到了同样的问题，只有当我将数据属性添加到 html

时它才有效

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
  style="display: block;" data-keyboard="false" data-backdrop="static">
...

Answer 4

我想在 AJAX 请求完成时禁用模式关闭。

@jollyGreen 让我朝着正确的方向前进，但是在 bootstrap 4 中，我可以在模态已经完成后务实地执行此操作的唯一方法显示是这样的：

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

也就是说在v3和v4之间他们好像把bs.modal数据对象的options属性改成了_config.

Answer 5

有两种处理方法：

1) 您可以直接将数据属性添加到 HTML -

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">

2) 你可以使用 JQuery (For Bootstrap V4) -

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

对于 Bootstrap V3 -

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

Answer 6

在Angular尝试：

[config]="{backdrop: 'static', keyboard: false}"

在模态中div。此解决方案 100%

例如：

<div bsModal #dangerModal="bs-modal" [config]="{backdrop: 'static', keyboard: false}" class="modal fade" tabindex="-1"
 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Bootstrap 模态背景 = 'static' 不工作

Bootstrap modal backdrop = 'static' not working

bootstrap-modal

twitter-bootstrap-3