如何处置（销毁）bootstrap 5 modal

Question

我在项目中使用 bootstrap 5。我正在构建一个当您单击按钮时打开的测验。测验显示在 Bootstrap 5 模态组件内。

我的问题是，当您单击模式的关闭按钮然后重新启动它时，上一轮测验的数据仍然存在（单选按钮仍然处于选中状态）。我希望关闭按钮可以销毁模式并处理所有以前的数据。我尝试了几种方法（分别），如下所述：

myModal.dispose()
myModal.modal("dispose")
bootstrap.Modal.dispose();
bootstrap.Modal(bootstrap.modal.getInstance(quiz-modal)).dispose

Bootstrap 5 有一个名为

Modal

的类，其中有一个

dispose

方法，但我无法使用它。

模态的名称是

myModal

，它是一个 Bootstrap 5 模态。测验模式是对显示为模式的 html 元素的引用。

Answer 1

我找到了一个似乎有效的解决方案。

quizClose.addEventListener("click", () => {
  //reset the forms containing quiz questions
  for (let i = 0; i < totalQuestions.length; i++) {
    totalQuestions[i].reset();
  }
  let myModal = bootstrap.Modal.getInstance(
    document.querySelector(".quiz-modal")
  );
  //remove static backdrop
  myModal.setAttribute("data-bs-backdrop", "false");
  //destroy modal
  myModal.dispose();
});