html - 无法单击模式窗口中的元素

Question

我一直在尝试解决我正在使用的模态窗口的问题。

http://dev.ikov.org/store/index.php

当你去商店，然后按右手边的武器，然后选择元素，模态窗口弹出。但是，我无法突出显示文本或选择文本框或按下按钮。

HTML

<div id="ags" class="modalDialog2">  <!-- overlay -->
  <div id="storeboxitem"> <!-- modal box -->
    <div id="storeboxlight">
        <!-- content goes here -->
    </div>
  </div>
</div>

CSS

.modalDialog2 {
  position: fixed!important;
  font-family: Arial, Helvetica, sans-serif;
  top: 0!important;
  right: 0!important;
  bottom: 0!important;
  left: 0!important;
  background: #000!important;
  z-index: 999!important;
  opacity: 0!important;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

#storeboxitem {
  display: block!important;
  background: url(imgs/contentboxbg.png)!important;
  border: 1px solid #070810!important;
  position: relative!important;
  width: 575px!important;
  height: 500px!important;
  z-index: 9999!important;
}

#storeboxlight {
  display: block!important;
  background: url(imgs/lightbg.png) no-repeat!important;
  z-index: 9999!important;
  border-top: 1px solid #13182c;
  margin: auto!important;
  width: 575px!important;
  height: 100%!important;
}

我还注意到后面的元素可以点击，所以我认为这可能是 z-index 的问题，所以我尝试更改它但没有任何效果。

Answer 1

因为你用过pointer-events: none; .modalDialog2 元素是模式的容器。

pointer-events: none; 阻止元素及其后代 ¹ 免于成为鼠标事件的目标。

因此，只需删除:

.modalDialog2 {
    /* pointer-events: none; */
}

您还可以使用 auto 值覆盖后代的指针事件属性。例如，在 #storeboxitem 元素(模态框)或其他元素上使用 pointer-events: auto;。

#storeboxitem { /* A child element */
    pointer-events: auto;
}

<子> MDN:如果后代元素的 pointer-events 设置为其他值

，则鼠标事件可能会以其后代元素为目标