Close PopOut DIV by clicking outside of it. Using JS

Question

I have the following code:

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>

Everything is working just fine, the popOut triggers normally and closes when i click on the same DIV again.

I am not really experienced with JS and my question is, what can i improve here so that in a simple way the popOut is closed by clicking anywhere out of the popOut div: "popuptext".

Thanks in advance. Extra thanks for a good explanation instead of just dropping the fix. I need to learn.

Y'all have a nice day.

I'm assuming you've already looked at other questions... but: https://stackoverflow.com/questions/17965839/close-a-div-by-clicking-outside — blackandorangecat, Nov 25 '18 at 15:32
Please don't post links to your code. Edit your question and place **all** the relevant code into a "code snippet" (you'll find that button on the edit question toolbar). Provide enough code so that we have a minimal working example of what you are working with. — Scott Marcus, Nov 25 '18 at 15:40
The key, as others have pointed out, is using the onblur or onfocusout events. You may also want to look at [Bootstrap popovers](https://getbootstrap.com/docs/4.1/components/popovers/) for ideas. — Yogi, Nov 25 '18 at 15:55

score 0 · Accepted Answer · answered Nov 25 '18 at 15:33

0

wrap your popup inside another parent div,this new div should be behind your modal and should have a height and width of 100% (give an id to this div like my modal) and use this code

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";
}
}

answered Nov 25 '18 at 15:33

Faizal Hussain

1,551
2
10
18

Link to full code: W3Schools.com: [How To Create a Modal Box](https://www.w3schools.com/howto/howto_css_modals.asp) – Yogi Nov 25 '18 at 15:49

Close PopOut DIV by clicking outside of it. Using JS

1 Answers1