为什么模态出现然后消失？

Question

我认为我用最少的 JS 编写了非常简单的模态代码。当按下按钮时，模态出现一秒钟，页面刷新并且模态消失。我不知道可能出了什么问题。提前致谢！

var modalBtn = document.querySelector("#modal-btn");
var modalBg = document.querySelector(".modal-bg");
var modalClose = document.querySelector(".modal-close");

modalBtn.addEventListener("click", function() {
modalBg.classList.add("bg-active");
});

modalClose.addEventListener("click", function() {
modalBg.classList.remove("bg-active");
});

Answer 1

在您的注册按钮中添加一个 type="button"。

<button class="primary-btn" type="button" id="modal-btn">Sign Up</button>

默认情况下，表单内的按钮是type="submit"，所以当你点击它时，表单正在提交。

JSFiddle

Answer 2

正如 Anurag 所说，该按钮默认为 type="submit"，在表单内将尝试重定向，您可以在 js 中做的另一件事是阻止该按钮的默认行为。

modalBtn.addEventListener("click", (ev) => {
 ev.preventDefault();//you can prevent the default action for that button
  modalBg.classList.add("bg-active");
});

希望这对您有所帮助。

为什么模态出现然后消失？

Why modal appears and then disappears?

javascript

css

modal-dialog

bootstrap-4