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

Question

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

https://jsfiddle.net/wj3r2qzu/

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