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>