单击弹出窗口外部关闭弹出窗口 javascript

Question

我使用本教程将弹出窗口添加到我的网页。有没有办法让它在您点击外部 it/click 时关闭弹出窗口。

我已尝试按照此 post Close pop up div by clicking outside of it 添加 invisibleDiv，但弹出窗口仍然仅在单击按钮本身时才移动。

https://www.w3schools.com/howto/howto_js_popup.asp

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

    /* Popup container - can be anything you want */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* The actual popup */
    .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    /* Toggle this class - hide and show the popup */
    .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
    }
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;} 
      to {opacity: 1;}
    }
    
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body style="text-align:center">
    <h2>Popup</h2>
    <div class="popup" onclick="myFunction()">Click me to toggle the popup!
      <span class="popuptext" id="myPopup">A Simple Popup!</span>
    </div>
  </body>
</html>

Answer 1

拥有一个全局点击处理程序来检查被点击元素的 classList 是在弹出窗口外点击时关闭弹出窗口的一种方法。这是一个例子：

const popups = [...document.getElementsByClassName('popup')];

window.addEventListener('click', ({ target }) => {
  const popup = target.closest('.popup');
  const clickedOnClosedPopup = popup && !popup.classList.contains('show');
  
  popups.forEach(p => p.classList.remove('show'));
  
  if (clickedOnClosedPopup) popup.classList.add('show');  
});

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup.show .popuptext {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

<h2>Popup</h2>

<div class="popup">Click me to toggle the popup!
  <span class="popuptext">A Simple Popup!</span>
</div>

<div class="popup">Click me to toggle the popup!
  <span class="popuptext">A Simple Popup!</span>
</div>

Answer 2

向弹出窗口的容器添加一个 onclick 并停止在您不想触发该操作的所有内部元素上传播事件。

let popup = document.querySelector(".popup");

function toggle(e) {
  e.stopPropagation();
  popup.classList.toggle("hide");
}

function closePopup() {

  if (!popup.classList.contains("hide")) {
    popup.classList.toggle("hide");
  }
}

body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background: lightgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup {
  width: 100px;
  height: 100px;
  background: white;
  margin: 0 auto;
}

button {
  position: fixed;
  top: 0;
}

.hide {
  display: none;
}

<div class="container" onclick="closePopup()">
  <div class="popup hide" onclick="event.stopPropagation()"> </div>
  <Button onclick="toggle(event)">Toggle</Button>
</div>

Answer 3

PHP

<?php       
    echo '<div><a href="#" id="btnshow" onclick="showcontents();">Display Content</a></div>';
    echo '<div id="viewcontent"></div>';
 ?>

脚本

Fill the generated content to the inside div

function showcontents()
{
  var content = 'Add dynamic content';
  $('#viewcontent').html(content);
}

Empty the div content by clicking outside div

$("body").click(function(e) 
{
  var contentlength = $("#viewcontent").text().length;      
  if(contentlength > 0 && e.target.id != 'btnshow'){
     $('#viewcontent').html("");
  }
}

单击弹出窗口外部关闭弹出窗口 javascript

Close popup by clicking outside it javascript

javascript

popup