Node.js는 div를 팝업하고 마스크 layer_javascript 기술을 표시합니다.

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

//---------- --- -------팝업 레이어------
//popDivId: 팝업 레이어 div의 ID
//dragDivId: 애니메이션 div의 ID를 드래그하는 데 사용됩니다.
//isShowMask: 마스크 레이어 표시 여부
function popDivShow(popDivId, dragDivId, isShowMask) {
if (isShowMask) {
creatMask (popDivId);
}
var oWins = document.getElementById(popDivId);
var oWins_title = document.getElementById(dragDivId)
var bDrag = false; 0;
oWins.style.display = "block";
oWins_title.onmousedown = function(event) {
var event = event || window.event; disX = event.clientX - oWins.offsetLeft ;
disY = event.clientY - oWins.offsetTop;
this.setCapture && this.setCapture()
return false
document.onmousemove = function(event) {
if (!bDrag)
return;
var event = event || window.event
var iL = event.clientX - disX; var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWins.offsetWidth;
var maxT = document.documentElement.clientHeight -
iL = iL < ? 0 : iL > maxL : iL
iT oWins.style.marginTop = oWins.style .marginLeft = 0;
oWins.style.left = iL "px";
oWins.style.top = iT "px"
>};
document.onmouseup = window.onblur = oWins_title.onlosecapture = function() {
bDrag = false;
oWins_title.releaseCapture && oWins_title.releaseCapture()
}
//팝업 레이어 숨기기
function popDivHidden(popDivId) {
var oWins = document.getElementById(popDivId);
oWins.style.display = "none"
window. parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
}
// 팝업 레이어의 zIndex 가져오기
function getZindex(popDivId) {
var popDiv = document.getElementById(popDivId);
var popDivZindex = popDiv.style.zIndex;
return popDivZindex;

}
// 마스크 레이어 생성
function creatMask( popDivId) {
// 매개변수 w는 팝업 페이지의 너비, 매개변수 h는 팝업 페이지의 높이, 매개변수 s는 팝업 페이지의 경로
var MaskDiv = window.parent.document.createElement("div");
maskDiv.id = "maskDiv";
maskDiv.style.position = "고정"
maskDiv.style.top = "0";
maskDiv.style.left = "0";
maskDiv.style.zIndex = getZindex(popDivId ) - 1;
maskDiv.style.BackgroundColor = "#333"; filter = "alpha(opacity=70)";
maskDiv.style.opacity = "0.7";
maskDiv.style.width = "100%";
maskDiv.style.height = parent.document.body.scrollHeight 50) "px";
window.parent.document.body.appendChild(maskDiv);
maskDiv.onmousedown = function() {
window.parent.document.body .removeChild(window.parent.document.getElementById("maskDiv"))
}
}