상자를 위로 이동 (Z- 색인)

Question

클릭 가능한 아이콘이있는 도구 모음이있는 가상 데스크톱처럼 작동하는 응용 프로그램이 있습니다. 아이콘을 클릭하면 어떤 아이콘을 클릭했는지에 대한 다른 내용의 창이 열립니다 (동적으로 생성됨).

"moveOnTop()"(아래 참조)이라는 함수를 사용하면 창을 만들 때 호출되며 click 이벤트는 해당 창에 바인딩됩니다. 여러 창이 열리고 사용자가 다른 창 뒤에 정렬 된 창을 클릭하면 클릭 한 창이 맨 위로 이동합니다. 문제에 대한 지금

...

아이콘 중 하나를 클릭, 상자가 썸네일 이미지의 무리를 보여 열리고 축소판 중 하나를 클릭하면 새로운 창이 특정 이미지로 열립니다 . 이미지가있는 창은 맨 위로 이동해야하지만 클릭 한 축소판 상자의 클릭 이벤트가 이미지 생성 창을 만든 후에 시작되어 그 창 이동으로 이어진다는 이유로 인해 발생하지 않습니다 상단.

나는 다른 말로 문제를 설명하는 법을 알지 못했고 나는 당신이 내 뜻을 이해할 수 있기를 바랍니다. 몇 시간 동안이 문제로 고생하고 있기 때문에 정말 감사드립니다. 감사합니다.

Windows.prototype.buildWindow = function(){ 

    // a function that created the boxes 

    Windows.prototype.moveOnTop(); 
} 

Windows.openedImg = function(){ 

    // a function that creates the box with the clicked image 

    var thisWindow = $(this); 
Windows.prototype.getZindex(thisWindow); 
} 

Windows.prototype.moveOnTop = function(){ 

var boxes = $('.window'); 

    boxes.click(function() { 

     var thisWindow = $(this); 
     Windows.prototype.getZindex(thisWindow); 
    }); 
} 

Windows.prototype.getZindex = function(thisWindow){ 

var boxes = $('.window'); 
var maxZindex = 0; 

    boxes.each(function() { 

     var zIndex = parseInt($(this).css('z-index'), 10); 
     maxZindex = Math.max(maxZindex, zIndex); 
    }); 

thisWindow.css("z-index", maxZindex + 1); 
} 

Answer 1

HTML :

<img onclick="openWindow(true)" ... /> 

자바 스크립트 :

대신 Z- 인덱스를 오버라이드 (override) 몇 가지 클래스 이름을 추가 할 이유 Z-인덱스를 셔플의

function openWindow(doNotGoToTop) { 
    ... //open window 
    if (!doNotGoToTop) { 
     ... //go to top 
    } 
}