모달 창에서 항목을 클릭 할 수 없습니다

Question

나는 사용하고있는 내 모달 창문에 문제를 해결하려고 노력하고 있습니다.

http://dev.ikov.org/store/index.php <./ P>

상점에 가면 오른쪽에 무기를 누른 다음 항목을 선택하면 모달 창이 나타납니다.그러나 텍스트를 강조 표시하거나 텍스트 상자를 선택하거나 버튼을 누릅니다.

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; 요소와 자손은 ^{1 마우스 이벤트로 타겟팅되는 것입니다.}

단순히 제거하십시오 :

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

.

auto 값을 사용하여 자손의 포인터 이벤트 속성을 대체 할 수도 있습니다.예를 들어 pointer-events: auto; 요소 (모달 상자) 또는 다른 요소의 #storeboxitem를 사용하십시오.

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

.

MDN : 마우스 이벤트는그 자손이 다른 값으로 설정된 Descendant가 다른 값

에 설정된 경우 자손 요소를 대상으로합니다.

Answer 2

pointer-event: none

에서 .modalDialog2를 삭제하십시오.