jQuery로 오버레이 레이어

Question

요소를 클릭 할 때 반투명 레이어로 전체 화면을 덮을 오버레이 레이어를 만들려고합니다. 문서에 첨부하는 데 어려움을 겪고 있습니다.

#overlay { 
    background-image: url(../overlay.png); 
    opacity: 0.5; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
} 

$("#getOverlay").click(function() { 
    var overlay = $('<div id="overlay">'); 
    $('body').append(overlay); 
}); 

문서에 배치하면 레이어가 잘 작동합니다. 어떤 이유로 든 클릭 할 때 문제가 발생합니다.

---

업데이트 : IE의 이전 버전을 모방

난 그냥 IE 탭 (FF 플러그인) 아래에 테스트 것을 깨달았다. FF와 IE9는 의도 한대로 작동합니다. 이전 IE는 분명히 투명도를 인식하지 못하므로 CSS를 수정했습니다.

#overlay { 
    background-image: url(../overlay.png); 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 12000; 
} 

감사합니다.

Answer 1

그것은이 jsfiddle에 나를 위해 작동 :

http://jsfiddle.net/z8FmA/

Answer 2

이 시도 :

$("#getOverlay").click(function() { 
    var overlay = $('<div>'); 
    overlay.addClass('overlay'); 
    $('body').append(overlay); 
}); 

및 $("#getOverlay")는 DOM로드 시도에서 하지가있는 경우 :

$("#getOverlay").live('click',function(){... 

과에 CSS의 첫번째 줄을 변경 :

.overlay { 

see working DEMO here

Answer 3

당신은 CSS의 정의에 display: none을 추가 한 다음 클릭에 핸들러, $('#overlay').show()를 수행 <div id="overlay"></div> 같이 HTML에 직접 오버레이를 추가해야합니다. 그렇지 않으면 요소를 클릭 할 때마다 본문에 새 div가 추가됩니다.