Unable to click on items in modal window

Question

I've been trying to fix a problem with my modal window i'm using.

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

When you go to the store, then press weapons on the right hand side, then select the item, the modal window pops up. However, i cant highlight the text or select the textbox or press the button.

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;
}

I've also noticed that the items in the back can be clicked, so i thought it might be a problem with the z-index, so i then tried changing that but nothing worked.

Answer 1

Because you have used pointer-events: none; for the .modalDialog2 element which is the modal's container.

pointer-events: none; prevents the element and its descendants¹ from being targeted by mouse events.

Hence, simply remove that:

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

You can also override the pointer event property for the descendants by using the auto value. For instance, use pointer-events: auto; on #storeboxitem element (The modal box) or another elements.

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

_{MDN: Mouse events may target its descendant elements if those descendants have pointer-events set to some other value}

Answer 2

Please delete pointer-event: none in .modalDialog2