Estoy creando un modal y necesito colocar el modal arriba
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>
foto el resultado:
y quiero que la caja quede encima del contenido para que no quede debajo del contenido sino encima, como si fuera una capa encima del contenido real de mi página