如何通過 div 點擊按鈕？ （指針事件不起作用）

Question

我正在構建一個模態，但我有一個問題。

首先運行下面的腳本。

問題是我無法單擊切換按鈕。 有任何想法嗎？ 我嘗試使用“指針事件：無”，但不幸的是它沒有按我預期的方式工作。

 const modal = document.querySelector(".modal"); const layer = document.querySelector(".layer"); const toggleBtn = document.querySelector(".toggleBtn"); const closeModalBtn = document.querySelector(".closeModalBtn"); toggleBtn.addEventListener("click", () => { modal.classList.toggle("hide") }); closeModalBtn.addEventListener("click", () => { modal.classList.add("hide"); });

 body { width: 300px; height: 300px; }.modal { width: 100px; background: silver; text-align: center; display: flex; flex-direction: column; transform: scale(1); transition: 120ms; }.layer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: grid; place-items: center; }.hide { transform: scale(0); }

 <button class="toggleBtn">Toggle Modal</button> <div class="layer"> <div class="modal"> <h6>I'm a modal!</h6> <button class="closeModalBtn">Ok</button> </div> </div>

Answer 1

使用 CSS 將按鈕分層在模式的頂部。

 const modal = document.querySelector(".modal"); const layer = document.querySelector(".layer"); const toggleBtn = document.querySelector(".toggleBtn"); const closeModalBtn = document.querySelector(".closeModalBtn"); toggleBtn.addEventListener("click", () => { modal.classList.toggle("hide") }); closeModalBtn.addEventListener("click", () => { modal.classList.add("hide"); });

 body { width: 300px; height: 300px; } /* Position the button above the modal */.toggleBtn { position:relative; z-index:1000;}.modal { width: 100px; background: silver; text-align: center; display: flex; flex-direction: column; transform: scale(1); transition: 120ms; }.layer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: grid; place-items: center; }.hide { transform: scale(0); }

 <button class="toggleBtn">Toggle Modal</button> <div class="layer"> <div class="modal"> <h6>I'm a modal!</h6> <button class="closeModalBtn">Ok</button> </div> </div>