Почему модальное появляется, а затем исчезает?

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

Answer 2

Как сказал Анураг, эта кнопка по умолчанию type = "submit", которая внутри формы будет пытаться перенаправить, еще одна вещь, которую вы можете сделать в js, - это поведение по умолчанию для этой кнопки.

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

Надеюсь, это может быть полезным.