我一直在尝试解决我正在使用的模态窗口的问题。
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 的问题,所以我尝试更改它但没有任何效果。
最佳答案
因为你用过pointer-events: none;
.modalDialog2
元素是模式的容器。
pointer-events: none;
阻止元素及其后代 1 免于成为鼠标事件的目标。
因此,只需删除:
.modalDialog2 {
/* pointer-events: none; */
}
您还可以使用 auto
值覆盖后代的指针事件属性。例如,在 #storeboxitem
元素(模态框)或其他元素上使用 pointer-events: auto;
。
#storeboxitem { /* A child element */
pointer-events: auto;
}
<子> MDN:如果后代元素的 pointer-events
设置为其他值
关于html - 无法单击模式窗口中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22028369/