如何在 Bootstrap v5 中使用 javascript 编辑模态 data-bs-keyboard 属性？

Question

我正在尝试拥有一种设置面板，可以启用/禁用模式的 data-bs-keyboard 属性，允许或禁止它们使用转义键关闭。

到目前为止，唯一有效的代码是：

 // assume the 'modal' variable contains my modal
 let bootstrapInstance = bootstrap.Modal.getInstance(modal);
 bootstrapInstance._config.keyboard = false;

问题是这只有在模态已经初始化之后才有效。如果该设置在网站启动后立即触发，则还没有模态实例，并且代码不起作用。

我在下面尝试过，但它也不起作用：

$('#myModal').data('bs.modal')._config.keyboard = false; // or true

Answer 1

这是我如何让它工作的：

使用“getOrCreateInstance()”函数而不是getInstance()函数。如果该模式尚不存在，这将创建一个新的模式实例。因此，其余代码将始终有效。

 let bootstrapInstance = bootstrap.Modal.getOrCreateInstance(modal);
 bootstrapInstance._config.keyboard = false; // or true

我尝试了各种其他方法，但如果您的某些模态已经初始化，大多数方法都将不起作用。如果切换设置时没有初始化任何模态框，那么您还可以更改默认模态框设置：

 bootstrap.Modal.Default.keyboard = true; // or false

或者您可以选择一个特定的模式并更改其 data-bs-keyboard 属性，您会发现该属性位于以下位置：

$('#myModal')[0].attributes[3].value = true; // or false

你可以'console.log($('#myModal'));'了解这条路。

同样，最后两个不适用于已经初始化的模态。当您尝试更改设置时，您始终可以调用 getInstance() 函数来检查模式实例是否存在。

我怀疑是否有比第一种方法更干净的方法，因此我将其作为解决方案发布。