라이트 박스 위치 지정 문제

최소한의 JS (프레임 워크)를 기반으로해야하는 라이트 박스를 만들려고하는데, "빛"은 이 아닌이 허용됩니다. 다양한 자원의 도움으로, 내가 JS의 다음 비트 썼다 :라이트 박스 위치 지정 문제

이

var dialogWritten = false; 

function getZIndex(elem) { 
    var elems = document.getElementsByTagName(elem); 
    var highest = 0; 
    for (var i = 0; i < elems.length; i++) { 
     var zindex = document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"); 
     if ((zindex > highest) && (zindex != 'auto')) { 
      highest = zindex; 
     } 
    } 
    return highest; 
} 

function displayDialog() { 
    if (!dialogWritten) { 
     var backgroundOverlay = document.createElement("div"); 
     backgroundOverlay.style.display = "block"; 
     backgroundOverlay.style.position = "absolute"; 
     backgroundOverlay.style.top = "0%"; 
     backgroundOverlay.style.left = "0%"; 
     backgroundOverlay.style.width = "100%"; 
     backgroundOverlay.style.height = "100%"; 
     backgroundOverlay.style.backgroundColor = "#000000"; 
     backgroundOverlay.style.zIndex = getZIndex('*') + 1; 
     backgroundOverlay.style.opacity = "0.8"; 
     document.body.appendChild(backgroundOverlay); 
     dialogWritten = true; 

     var configDialog = document.createElement("div"); 
     configDialog.style.display = "block"; 
     configDialog.style.position = "absolute"; 
     configDialog.style.top = "25%"; 
     configDialog.style.left = "25%"; 
     configDialog.style.width = "50%"; 
     configDialog.style.height = "50%"; 
     configDialog.style.backgroundColor = "#acacac"; 
     configDialog.style.zIndex = getZIndex('*') + 1; 
     configDialog.style.padding = "10px"; 
     configDialog.style.fontFace = "sans-serif"; 
     configDialog.innerHTML = '<p>Configuration dialog</p>'; 
     document.body.appendChild(configDialog); 
     dialogWritten = true; 
    } 
}

라이트 박스 분명히 작동을하지만, 오버레이가없는 낮은 섹션 만 페이지의 맨 위 부분에 적용 것으로 나타났다.

스크린 명확한 설명을하는 데 도움이됩니다 :

나는 라이트의 오버레이가 페이지 전체에 적용 할 수 있도록하기 위해 무엇을해야

screenshot: Lightbox applies to the above part screenshot: Lightbox does not apply to lower sections

미리 도움을 청하십시오.

출처

2013-05-30 user2064000

달성하려는 목표에 따라 달라집니다 - 라이트 박스 위치를 고정 시키길 원하십니까 (뷰포트 기준)? 이 경우 간단합니다. 단지 위치를 절대 값 대신 고정 값으로 설정하십시오. 영업 설명 후

편집 : 고정에

당신이 라이트 오버레이는 전체 페이지에 적용 할 경우가, 배경 오버레이의 위치를 설정합니다.

출처

2013-05-30 17:59:38 Terry

에 나는의 오버레이를 원하는 라이트 박스는 전체 페이지에 적용됩니다. 이 문제는 이것을 명확하게 나타내지 않았으며이를 반영하기 위해 편집되었습니다. – user2064000

변경

backgroundOverlay.style.position = "absolute";

에

backgroundOverlay.style.position = "fixed";

및

configDialog.style.position = "absolute";

configDialog.style.position = "fixed";

출처

2013-05-30 18:09:44

라이트 박스 위치 지정 문제

답변

관련 문제