Question

当单击页面上的任意位置时，如何添加此内容以使弹出窗口关闭？谢谢

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

Answer 1

您可以在透明度低的弹出窗口后面创建一个div，该div覆盖整个页面，并添加一个事件侦听器，该事件侦听器在单击时切换“显示”。

Answer 2

您可以将事件侦听器添加到document，并在单击时检查myPopup类是否为contains show。如果为true，则使用classList.remove

document.addEventListener('click', function() {
  let popup = document.getElementById("myPopup");
  if (popup.classList.contains("show")) {
    popup.classList.remove('show')
  }
}
})

Answer 3

这是一个自定义实现。

- Use a button click event to show and hide the popup.
- Use a body click event and check whether the ckick event is inside or outside the popup.
- If the click is inside the popup, do nothing. Or else hide the popup.

function myFunction(event) {
  var popup = document.getElementById("myPopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}

function onBodyClick(event) {
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "myPopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("myPopup");
  if (popup.style.display === "block") {
    myFunction(event);
  }
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}
#myPopup {
  border: 1px solid black;
  padding: 50px;
}

<body onclick="onBodyClick(event)">
  Outside Popup
  <button onclick="myFunction(event)">Open Popup</button>
  <div id="myPopup" style="display: none;">
    Inside Popup
    <span>
      Inner node
    </span>
  </div>
</body>

Answer 4

您可以在弹出窗口后面添加一个覆盖整个屏幕的层，并听取对该元素的单击。每当有人在弹出窗口内部单击时，请检查被单击的元素（target)是否在弹出窗口的外部，并隐藏弹出窗口。

const popup = document.getElementById('myPopup');

function onPopupClick(event) {
  const { target } = event;
  if (target === popup) {
    popup.classList.remove('show');
  }
}

popup.addEventListener('click', onPopupClick);

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms ease-in-out, visibility 350ms ease-in-out;
}

.popup.show {
  opacity: 1;
  visibility: visible;
}

.popup__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 300px;
  height: 250px;
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  background-color: #f7f7f7;
  padding: 0 15px;
  text-align: center;
}

<div id="myPopup" class="popup show">
  <div class="popup__inner">
    <p>I'm a popup. <br>Click in the white square and see nothing happens</p>
    <p>Click outside of me and I will close.</p>
  </div>
</div>

在其外部单击时，Onclick弹出div关闭

4 个答案: