절대 위치 요소보기에서 절대 위치 요소보기에 Z- 색인

Question

개체를 창에 추가하면 수신기가 배치 된 개체를 제외한 본문의 클릭을 수신 대기하고 제거하는 자바 스크립트를 만들려고합니다. 실제 객체 자체를 제외하고는 윈도우의 아무 곳이나 클릭하면 객체가 클릭됩니다.

수많은 실패한 시도를 통해 오버레이 div를 overlay2 (또는 무엇이든지 중요하지 않은)라는 화면에 동적으로 추가 한 다음 해당 div에 대한 클릭을 수신합니다. 오버레이를 창에 추가하고 이미 배치 된 최상위 요소 (예를 들어 5000)보다 높은 숫자로 zIndex를 설정 한 다음 오버레이 위에 배치되는 유일한 개체의 zIndex를 더 높은 숫자 (예 : 6000)로 설정하면 , 오버레이는 모든 것 위에 계속 나타나고 나는 그 위에 놓으려는 div의 객체를 선택할 수 없습니다.

var overlayDiv = document.createElement('div'); 
    overlayDiv.setAttribute('id', 'overlay2'); 
    overlayDiv.style.zIndex = '5000'; 
    overlayDiv.style.width = '100%'; 
    overlayDiv.style.height = '100%'; 
    overlayDiv.style.left = '0'; 
    overlayDiv.style.top = '0'; 
    overlayDiv.style.position = 'absolute'; 
    document.body.appendChild(overlayDiv); 

    $(container).append(template); 
    template.style.zIndex = '6000'; 

    //Listeners  
    //Page click listener. Closes the tool when the page is clicked anywhere but inside the parent. 
    var initialClick = false; 
    $('body').on('click.editObjectListeners', function(event) { 
     var target = EventUtility.getTarget(event); 
     if(initialClick) { 
      console.log(target.id); 
      if(target.id == 'overlay2' && target.id != '') { 
       $(overlayDiv).remove(); 
       finish(); 
      }; 
     } 
     initialClick = true; 
    }); 

나는 overlayDiv의 절대 위치 지정과 관련이 있음을 확인했습니다. 테스트하는 동안 템플릿을 배치하기 위해 절대 위치 지정을 사용하고 overlayDiv처럼 템플릿 객체를 직접 추가하면 zIndex는 원래 예상했던대로 overlayDiv보다 위에 작동합니다. 불행하게도이 요소를 절대적으로 배치하는 것은 테스트 목적을 넘어서는 나에게별로 의미가 없습니다. 이 문제를 해결할 방법이 있습니까?

Answer 1

실제로 z- 인덱스는 절대 배치 된 요소에서만 성공적으로 사용될 수 있다고 밝혀졌습니다. 따라서 본문 클릭 리스너를 해결할 원래 계획은 작동하지 않습니다. 대신 jQuery 및 리스너 객체를 사용하여 클릭을 수신 대기하기로 결정했습니다. 그것의 훨씬 더 청결한 해결책, 나는 다만 그것의 주위에 나의 머리를 감쌌다. You can view my other solution here.

Answer 2

container에 추가하기 전에 zIndex을 설정해보십시오.

template.style.zIndex = '6000'; 
$(container).append(template); 

Answer 3

나는이 특정 문제를 도움이 될 것입니다 얼마나 모르겠지만, 난 그냥 당신이 jQuery의 방법 "()의"의 사용에 문제가있을 수 있음을 통지 일어났다.

먼저 jQuery 버전 1.7 이상을 사용하고 있습니까? 맞습니까?

"live"와 달리 on() 매개 변수는 event, selector, function입니다. 당신이있는 곳

그래서 : 몇 가지 작은 방법으로 도움이

$('body').on('click.editObjectListeners', [SOME SELECTOR], function(event) { 
     var target = EventUtility.getTarget(event); 
     if(initialClick) { 
      console.log(target.id); 
      if(target.id == 'overlay2' && target.id != '') { 
       $(overlayDiv).remove(); 
       finish(); 
      }; 
     } 
     initialClick = true; 
    }); 

희망 :

$('body').on('click.editObjectListeners', function(event) { 
     var target = EventUtility.getTarget(event); 
     if(initialClick) { 
      console.log(target.id); 
      if(target.id == 'overlay2' && target.id != '') { 
       $(overlayDiv).remove(); 
       finish(); 
      }; 
     } 
     initialClick = true; 
    }); 

을 당신이 원하는 생각합니다.

행운을 빈다.