1

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

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 的问题，所以我尝试更改它但没有任何效果。

4

2 回答 2

3

因为您已经使用pointer-events: none;了.modalDialog2作为模态容器的元素。

pointer-events: none;防止元素及其后代1成为鼠标事件的目标。

因此，只需删除它：

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

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

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

MDN：pointer-events如果这些后代已设置为其他值，则鼠标事件可能会针对其后代元素

于 2014-02-25T23:27:16.913 回答
0

pointer-event: none请删除.modalDialog2

于 2014-02-25T23:33:04.367 回答