Bootstrap模态框背景 =“static”无效问题

Question

首先，我使用以下代码打开我的模态框：

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

然后，在另一种情况下，我需要在按ESC键或在外部点击时不关闭同一个模态窗口，因此我使用以下代码：

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

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

我该如何强制 backdrop 值的切换工作？

- João Paulo

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});

- Daniele Piccioni

Answer 2

我在使用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">
...

- Fernando Vieira

---

这也是Bootstrap 3的解决方案，如果您使用标记而不是JS方法打开模态框。 - Luca Detomi

是的，即使使用Javascript打开了模态框，这也是正确的。 - Aryo

Answer 3

类似 Daniele Piccioni，但更加简洁：

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

这是针对 Bootstrap 3.+ 的。

另请参阅：更改已存在的 Bootstrap 模态框选项

- jollyGreen

Answer 4

有两种处理方式：

1) 直接将数据属性添加到 HTML 中 -

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

2）你可以使用jQuery（适用于Bootstrap V4）-

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

对于Bootstrap V3 -

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

- Parikshit Sarkar

Answer 5

对于Bootstrap 5+，应该使用data-bs-backdrop="static" HTML 属性，这是因为Bootstrap会在HTML标记上为其直接属性添加bs。

- Rahul Garg

Answer 6

我想要在 AJAX 请求完成之前禁用模态框的关闭。 @jollyGreen 帮助了我，但是在 bootstrap 4 中，唯一能够在模态框已经显示后以编程方式实现这一点的方法如下： $("#myModal").data('bs.modal')._config.backdrop = 'static'; 也就是说，在 v3 和 v4 之间，他们似乎已经将 bs.modal 数据对象的 options 属性更改为 _config。

- DazBaldwin

Answer 7

在Angular中尝试：

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

在模态框中。这个解决方案已经完美运行了100%。

例如：

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

- sa_n__u

---

请解释你的答案，以便易于理解。 - Srikrushna

Answer 8

在HTML中添加了data属性。它适用于Bootstrap 4、Bootstrap 3。

<div class="modal fade"  tabindex="-1" role="dialog" aria-hidden="true" *data-keyboard="false" data-backdrop="static"*>
    <div class="modal-dialog modal-lg" role="document"><div class="modal-content"></div></div>
</div>

在jQuery中

$('div.modal').modal({
    backdrop: 'static',
    keyboard: false,
    show: false
});

- rsmdh