如何通过 div 单击按钮？（指针事件不起作用）

Question

我正在构建模态，但遇到了问题。

首先运行下面的脚本。

问题是我无法点击切换按钮。有任何想法吗？我尝试使用“pointer-events: none”但不幸的是它没有按我预期的方式工作。

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>

如何通过 div 单击按钮？（指针事件不起作用）

How do I click on a button through a div ? (pointer-events didn't work)

html

javascript

css

modal-dialog

如何通过 div 单击按钮？ （指针事件不起作用）

How do I click on a button through a div ? (pointer-events didn't work)

html

javascript

css

modal-dialog

如何通过 div 单击按钮？（指针事件不起作用）