如何实现不刷新页面关闭弹窗？

你的关闭按钮位于<form>标签内，浏览器会默认将未指定type的<button>解析为type="submit"，点击后触发表单提交，从而导致页面刷新。同时原代码的check函数存在逻辑错误，也会影响弹窗状态的正常管理。

解决方案 #

1. 修改关闭按钮类型

给关闭按钮明确添加type="button"，避免触发表单提交：

<button class="close__button" type="button">&times;</button>

2. 绑定关闭按钮的点击事件

在JS中添加事件监听，点击关闭按钮时隐藏弹窗，并同步重置checkbox的选中状态，保持逻辑一致性：

const closeBtn = document.querySelector('.close__button');
const popup = document.getElementById('popup');
const popupCheckbox = document.getElementById('popup__input');

closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
  popupCheckbox.checked = false;
});

3. 修复check函数的逻辑错误

原函数中使用赋值操作=替代了判断相等==，且else分支对HTMLCollection的操作有误，修改后代码如下：

function check() {
  const popup = document.getElementsByClassName('popup');
  const isChecked = document.getElementById('popup__input').checked;
  for (var i = 0; i < popup.length; i += 1) {
    popup[i].style.display = isChecked ? 'block' : 'none';
  }
}

完整修改后的代码 #

HTML

<main>
    <div class="button">
        <input onclick="check()" type="checkbox" name="popup__input" id="popup__input" class="popup__check">
    </div>
    <div class="popup" name="popup" id="popup">
        <label class="popup__label">
            <form>
                <div class="form__input">
                    <input type="text" id="fname" name="fname"><br><br>
                </div>
                <button class="form__button" type="submit" form="nameform" value="Submit">Відправити</button>
                <div class="close-button__container">
                    <button class="close__button" type="button">&times;</button>
                </div>
            </form>
        </label>
    </div>
    <div class="overlay">
    </div>
</main>

JS

let elem = document.querySelector('.button');

function check() {
  const popup = document.getElementsByClassName('popup');
  const isChecked = document.getElementById('popup__input').checked;
  for (var i = 0; i < popup.length; i += 1) {
    popup[i].style.display = isChecked ? 'block' : 'none';
  }
}

// 关闭弹窗逻辑
const closeBtn = document.querySelector('.close__button');
const popup = document.getElementById('popup');
const popupCheckbox = document.getElementById('popup__input');

closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
  popupCheckbox.checked = false;
});

const changePosition = () => {
  let randX = Math.random();
  let randY = Math.random();
  const circleSize = {
    width: elem.clientWidth,
    heigth: elem.clientHeight
  };

  const windowWidth = window.innerWidth - circleSize.width;
  const windowheigth = window.innerHeight - circleSize.heigth;

  let randXMult = windowheigth * randX;
  let randXP = randXMult + 'px';
  let randYMult = windowWidth * randY;
  let randYP = randYMult + 'px';

  elem.style.top = randXP;
  elem.style.left = randYP;
};

setInterval(changePosition, 1000);

内容的提问来源于stack exchange，提问作者UnOrderedItem