I am creating a modal and I need to place the modal above
let buttonOpen = document.querySelector(".button-open");
let buttonClose = document.querySelector(".button-close");
let modal = document.querySelector(".modal");
buttonOpen.addEventListener("click", () => {
modal.classList.add("show-modal");
});
buttonClose.addEventListener("click", () => {
modal.classList.remove("show-modal");
});body {
padding: 0;
margin: 0;
}
/* for open the modal*/
#container {
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.modal {
display: none;
width: 100px;
height: 100px;
background-color: aqua;
}
.show-modal {
display: block;
z-index: 1;
}<!-- for open the modal -->
<div id="container">
<button class="button-open">Open Modal</button>
</div>
<div class="modal">
<div class="modal-content">
<h3>Title a modal</h3>
<button class="button-close">Close Modal</button>
</div>
</div>photo the result:
and I want the box to be on top of the content so that it is not below the content but above it, as if it were a layer above my real page content
