Javascript : IE6/7/8에서 Z- 색인 DIV 가시성을 전환하십시오.

Question

iOS의 popover와 비슷한 jquery를 사용하여 간단한 popover 효과를 만들려고합니다. 코드는 ff, 사파리, 크롬 및 ie9에서 완벽하게 작동하지만 popover는 ie6-8에 나타나지 않습니다.

나는 JQuery와 1.5.1를 사용하고,뿐만 아니라 html5shiv 아니라 내가 HTML5 태그를 사용할 수 있도록 :

<!--[if lt IE 9]> 
<script src="html5shiv.js"></script> 
<![endif]--> 
<script defer src="jquery.min.js"></script> 
<script defer src="effects.js"></script> 

관련 자바 스크립트 코드입니다 :

$(document).ready(function() { 
    $('#button').live('click', function($e) { 
     $e.preventDefault(); 
     $('#popover').fadeToggle('fast'); 

     if ($('#button').hasClass('active')) { 
      $('#button').removeClass('active'); 
     } else { 
      $('#button').addClass('active'); 
     } 
    }); 
}); 

관련 CSS 코드 Popover는 다음과 같습니다.

#popover { 
    display: none; 
    position: absolute; 
    top: 43px; 
    left: 5px; 
    z-index: 5000000; 
} 

IE는 버튼을 클릭 할 때 클래스를 올바르게 추가하고 제거합니다. 또한 popover의 CSS를 display : block으로 변경하면 페이지가 IE에로드 될 때 popover가 올바르게 표시됩니다. 그러나 어떤 이유로 IE는 div의 디스플레이를 전환 할 수없는 것 같습니다. 나는 페이지의 하단에 자바 스크립트 코드를 넣으려고 시도했다. type = "text/javascript"를 추가하고 fadeToggle을 단순히 표시하도록 변경하고 getElementById를 사용하여 popover의 CSS를 변경했다. 여기 IE 및 jquery, click(), live() 및/또는 z-index와 관련 있습니다.

아이디어가 있으십니까?

Answer 1

이전에 사용한 적이있는 솔루션 중 하나는 click 이벤트에서 페이지에 요소를 추가하는 것입니다. 예를 들어, 귀하의 경우 :.

$ ('# 버튼') 살 (기능 ($ 전자, '클릭') { $ e.preventDefault(); $ (이) 후론 ('') ; ... });