IE8을 사용하면 모달 창에 가려진 요소와 상호 작용할 수 있습니다.

사용자에게 메시지 (#modal)에 대한 대화 상자 (모달이어야 함)가 있습니다. 사용자가 페이지의 다른 요소와 상호 작용하지 못하도록 "배경"요소 (#blinds)를 추가했습니다. IE8에서는 파이어 폭스에서 잘 작동합니다.IE8을 사용하면 모달 창에 가려진 요소와 상호 작용할 수 있습니다.

IE8에서는 입력 필드를 클릭하고 양식을 제출할 수 있습니다. HTML 및 CSS에서이를 방지 할 수있는 방법이 있습니까? jQuery 솔루션이 필요합니까?

CSS;

#blinds { 
    background-color: rgba(0, 0, 0, 0.5); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)"; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    z-index: 1000; 
} 

#modal { 
    position: fixed; 
    z-index: 1001; 
    display: none; 
}

HTML;

<div id='blinds'></div> 
<div id='modal'> 
    <h1></h1> 
    <span>X</span> 
    <p></p> 
</div>

여기 IE8에서 내 문제를 설명하는 jsFiddle입니다. http://jsfiddle.net/cAkzq/

출처

2012-03-30 Orange Kid

더미 클릭 이벤트를 오버레이에 추가하십시오. –

오버레이에서 click 및 keypress 처리기를 추가하면 여전히 해당 항목의 "아래"를 클릭하고 요소와 상호 작용할 수 있습니다. –

테스트 jsFiddle에서 이것을 볼 수 없습니다. – j08691

이 작업을 수행하는 사람은 -ms-filter입니다. 컬러 오버레이에 반투명 PNG를 사용하면 문제가 해결됩니다. 납품업자 꼬리표는 실험적이고 비표준 일 수있다.

출처

2012-03-30 21:28:26

감사합니다. 그것은 트릭을했다. –

IE8을 사용하면 모달 창에 가려진 요소와 상호 작용할 수 있습니다.

답변

관련 문제