Bootstrap 5 从另一个模态打开模态而不关闭第一个模态

Question

我正在尝试从模式中打开确认模式而不关闭第一个模式，但 Bootstrap 5 似乎与 4 版本具有不同的行为。

Bootstrap 4 以下版本可按预期工作

https://www.codeply.com/go/NiFzSCukVl

Bootstrap 5.1.2 版本以下与版本 4 示例的唯一区别是属性现在是 data-bs 而不是 data-

https://www.codeply.com/p/imDoS33VZx

有什么办法可以解决这个问题还是我遗漏了什么？

Answer 1

如果您使用 jQuery 打开模式，而不是使用

data-bs-toggle

和

data-bs-target

，它将在现有模式上打开模式，而不关闭第一个模式。使用此语法：

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

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

Answer 2

根据Bootstrap文档：

通过巧妙放置

data-bs-target

和

data-bs-toggle

属性，在多个模式之间切换。

例如，您可以从已打开的登录模式中切换密码重置模式。

请注意，多个模态不能同时打开——此方法只是在两个单独的模型之间切换。”

Answer 3

正如 snovak 回答的那样，使用

data-

属性是不可能的。 但是当你通过 js 触发模态时，它会按你想要的方式工作。他的答案包含一个 jQuery 解决方案。我想提供一个纯 js 替代方案：

import * as bootstrap from 'bootstrap';
...
...
const modalEl = document.querySelector('#myModal2');
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
modal.show();