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值覆盖后代的指针事件属性。例如，在pointer-events: auto;元素（模态框）或其他元素上使用#storeboxitem。

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

_{MDN:如果那些后代已将pointer-events设置为某个其他值}，则鼠标事件可以定位其后代元素

Answer 2

请删除pointer-event: none

中的.modalDialog2

无法单击模态窗口中的项目

2 个答案: