JS 제어 마스크 레이어 example_javascript 기술 소개

할 일이 없어서 프로젝트에서 팝업창을 마스크 레이어 표시로 변경했더니 효과가 더 좋아진 느낌이 듭니다. 상위 코드:
상위 페이지:

코드 복사 코드는 다음과 같습니다.

<%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> <% -- --%>

🎜>

printCertDia.jsp는 표시되는 최상위 jsp입니다. jsp:include 페이지를 사용하면 아직 연구하지 않았으므로 오류가 보고될 수 있습니다. 로딩 순서와 관련이 있습니다.

(라벨 변수 이름을 지정할 때 변수 이름이 ID와 동일한 경우 js도 오류를 보고하므로 피해야 합니다.)

마스크 레이어 표시를 트리거하는 js를 추가하세요. 상위 페이지:
전체 페이지를 덮을 수 있도록 여기에 본문과 동일한 크기의 div를 만듭니다. style.zIndex는 오버레이 순서(레벨)를 제어합니다.
style.filter, style.opacity는 디스플레이 투명도를 제어합니다.

코드 복사 코드는 다음과 같습니다.

//마스크 마스크 레이어

var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1"; = 수학 .max(document.body.scrollWidth, document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
newMask.style.width = _scrollWidth "px";
newMask.style.height = _scrollHeight "px";
newMask.style.top = "0px";
newMask.style.left =
newMask.style .Background = "#666";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40"
document.body.appendChild(newMask) ;


js는 상위 페이지에 정의된 div의 표시를 제어합니다.

코드 복사 코드는 다음과 같습니다. newDiv=document.getElementById("newDiv1");

// var newDiv = document.createElement("div")// newDiv .id = _id;

newDiv .style.position = "절대";
newDiv.style.zIndex = "9999";
newDivWidth = 600; style.width = newDivWidth "px";
newDiv.style.height = newDivHeight "px";
newDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2 - newDivHeight / 2) "px";
newDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2 - newDivWidth / 2) "px"
newDiv.style.Background = "#F7F7EF"; 🎜>newDiv.style.border = " 1px 솔리드 #860001";
newDiv.style.padding = "5px";
newDiv.style.display=''


js 상위 페이지 div의 스크롤 및 중앙 정렬을 제어합니다.
attachEvent, addEventListener는 처리 이벤트 newDivCenter를 추가하여 스크롤합니다.

코드 복사


코드는 다음과 같습니다:

function newDivCenter () { newDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2 - newDivHeight / 2) "px"; newDiv.style.left = (document.body.scrollLeft 문서 .body.clientWidth / 2 - newDivWidth / 2) "px"; } if (document.all) {

window. attachmentEvent("onscroll", newDivCenter)

}
else {
window.addEventListener('scroll', newDivCenter, false)
}


동적으로 추가 상위 페이지 div에 레이어 및 마스크 레이어 닫기(수정 필요):




코드 복사

코드는 다음과 같습니다.

var newA = document.createElement("a"); newA.href = "#"; newA.innerHTML = "닫기" newA.onclick = function() { if (document.all) {

window.detachEvent(" onscroll", newDivCenter)

}
else {
window.removeEventListener('scroll', newDivCenter, false);
}
document.body.removeChild(docEle("newDiv1") );
document.body.removeChild(docEle(m));
document.getElementById("certImg") .style.display='';
false 반환
}
newDiv .appendChild(newA);