通过在弹出的DIV外部单击来关闭它。使用JS

Question

我有以下代码：

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

/* POPOUT */
/* Popup container */
.popout {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
/* The actual popup (appears on top) */
.popout .popuptext {
    word-break: normal;
    visibility: hidden;
    width: 400px;
    max-height: 150px;
    overflow: scroll;
    background-color: #555;
    color: var(--ltext);
    text-align: justify;
    border-radius: 6px;
    border-color: var(--lightblue);
    border-width: 0.5px;
    border-style: solid;
    padding: 5px 10px 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popout .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 when clicking on the popup container (hide and show the popup) */
.popout .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 ;}
}

<div class='popout' onClick='popOut(".$row['model_id'].")'>
  <img src='/img/ships/".$row['model_id'].".gif' alt='".$row['model_name']." image' height='75px'/>
  <span class='popuptext' id='".$row['model_id']."'>
    <h3>".$row['model_name']."</h3>
    <hr>".$info."
  </span>
</div>

一切正常，当我再次单击同一DIV时，popOut正常触发并关闭。

我对JS并没有真正的经验，我的问题是，我可以在这里进行哪些改进，以便通过单击popOut div中的任意位置来关闭popOut：“ popuptext”。

先谢谢了。 特别感谢您提供了很好的解释，而不仅仅是放弃了修复程序。 我需要学习。

你们都过得愉快。

Answer 1

将弹出式窗口包装在另一个父div内，这个新的div应该位于您的模式后面，并且高度和宽度应为100％（像我的模式一样为该div提供ID）并使用此代码

var modal = document.getElementById('myModal');
// When the user clicks on this div, close it
  window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}