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

我用最少的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");
});

最佳答案

将type="button"添加到您的注册按钮。

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

默认情况下，表单内的按钮为type="submit"，因此单击该按钮即会提交表单。

JSFiddle