So, i have been trying to make a modal that onclick covers everything on the page besides the modal but its not working.

The overlay only covers the bottom of the page but not the top.

Screenshot: https://snipboard.io/g20yWq.jpg

Codesnippet:

var taskModal = document.getElementById("taskContainer")
var addBtn = document.getElementById("addButton")
var close = document.getElementsByClassName("close")

addBtn.onclick = function() {
    taskModal.style.display = "block";
}
close.onclick = function() {
    taskModal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == taskModal) {
      taskModal.style.display = "none";
    }
  }

.taskContainer {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  height: 100%;
  width: 100%;
  position: relative;
  top: 5pc;
}
#taskContainerContent {
  background-color: #333;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  height: 50%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

    <div  id="taskContainer">
      <div id="taskContainerContent">
      <span >&times;</span>
      </div>
    </div>

idk why the code snippet isn't working but okay. Does anyone have any idea on why it isn't overlaying correctly?

CodePudding user response：

Try this style.

.taskContainer {
  display: none; /* Hidden by default . change it with javascript to:  flex */
  justify-content: center;
  align-items: center;   /* first 3 items are for centered #taskContainerContent */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  height: 100vh; 
  width: 100vw;
  position: fixed; /* Stay in place */
  top: 0;
  left: 0;
  z-index: 100; /* another z indexes must be lower 100 */
}
#taskContainerContent {
  background-color: #333;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  height: 50%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

CodePudding user response：

Try changing the position to absolute, and setting the top, left, bottom, and right values all to 0. Also your close button onclick needed an index included for it to work correctly

See snippet below

var taskModal = document.getElementById("taskContainer")
var addBtn = document.getElementById("addButton")
var close = document.getElementsByClassName("close")

addBtn.onclick = function() {
  taskModal.style.display = "block";
}

close[0].onclick = function () {
  taskModal.style.display = "none";
};

window.onclick = function(event) {
  if (event.target == taskModal) {
    taskModal.style.display = "none";
  }
}

.taskContainer {
  display: none;  /* Hidden by default */
  overflow: auto;  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);  /* Black w/ opacity */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#taskContainerContent {
  background-color: #333;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  height: 50%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<button type="button" id="addButton">Show Modal</button>
<div  id="taskContainer">
  <div id="taskContainerContent">
    <span >&times;</span>
  </div>
</div>