How do I make a div disappear when clicking away?-CodePudding

I am trying to make my form div disappear when I click away from it. The function for this action was working fine until I also added another div to create an overlay of subtle opacity underneath the form after clicking on the add book button to make it appear. Is there a way to have both events happening without causing one of them to no longer work?

Thank you in advance.

HTML

 <link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
    <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="images/open-book.png"/>
    <title>My Library</title>
</head>
<body>

  <div >
    <h1>My Library</h1>
  </div>
  <div >
    <button id="addBook">Add Book</button>
  </div>

  <!-----Form information----->
  <div >
    <div 
    <form action="example.com/path"  id="popUpForm">
      <h3>add new book</h3>
      <input type="text" id="title" placeholder="Title">
      <input type="author" id="author" placeholder="Author">
      <input type="pages" id="pages" placeholder="Pages">
    <div >
      <label for="readOption">Have you read it?</label> 
      <input type="checkbox" id="readOption" name="readOption">
    </div>
      <button type="submit" id="submit">Submit</button>
    </form>
  </div>
  </div>
 
  <div id="invisibleDiv"></div>
  <div id="overlay"></div>
</body>
</html>

CSS

    * {
  margin:0;
  padding:0;
}


h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
  border-bottom: 2px solid #e0f3ff;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 5vh;
  color: #001D4A;
}

h3 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 4vh;
  color: #001D4A;
}

button {
  height: 10vh;
  width: 20vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-style: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#ffffff;
}

button:hover {
  background-color: #192c44;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}

.body-box {
  margin: 10vh;
  display: flex;
  justify-content: center;
}

/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.form-content {
  display: flex;
  border-radius: 20px;
  width: 35vh; 
  height: 45vh;
  border: 3px solid #001D4A;
  padding: 20px;
  background-color: #9DD1F1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17px;
  gap: 10px;
}


.isRead{
  display: flex;
  height: 60px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

label {
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.5vh;
}

input {
  border-radius: 10px;
  height: 80px;
  margin: 3px;
  width: 100%;
  background-color: #d0edff;
  border: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
}

#submit {
  margin: 4px;
  height: 70px;
  width: 100%;
  border-radius: 15px;
  color: #ffffff;
  border: none;
}

input[type=checkbox] {
    width: 20px;
    margin: 10px;
}

#invisibleDiv {
  height: 100%;
  width: 100%;
}

#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

const popUpForm = document.querySelector(".form-popup");
const button = document.querySelector("#addBook");
const overlay = document.getElementById('overlay');


document.getElementById('invisibleDiv').onclick = function()
{
   popUpForm.style.display = "none"; 
   overlay.style.display = "none";
};


button.addEventListener("click", () => {
  popUpForm.style.display = "block";
  overlay.style.display = "block";
});

CodePudding user response：

This happen because the overlay is place on top of the invisibleDiv. So you click event on the invisibleDiv is not triggering.

When you add css position other then static, they will have this stacking context apply to them, refer to the link below https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

You can just add the click event on the overlay.