js 팝업 div
//-------------------- -------------------
//popDivId: div ID
//dragDivId: div ID
//isShowMask:
function popDivShow(popDivId, dragDivId, isShowMask) {
var oWins = document.getElementById(popDivId);
var oWins_title = document.getElementById(dragDivId);
oWins.style.position = "absolute";
oWins.style.background = "#fff";
oWins.style.border = "1px solid #1f7bf9";
oWins.style.zIndex = 999;
oWins.style.display = "block";
//
var totalW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
//
var totalH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var divW = oWins.style.width.replace(/[^0-9]/ig, "") || oWins.offsetWidth;
var divH = oWins.style.height.replace(/[^0-9]/ig, "") || oWins.offsetHeight;
var divLeft = (totalW - divW) / 2 > 0 ? (totalW - divW) / 2 : 0;
var divTop = (totalH - divH) / 2 > 0 ? (totalH - divH) / 2 : 0;
oWins.style.top = divTop + "px";
oWins.style.left = divLeft + "px";
if (isShowMask) {
creatMask(popDivId);
}
var bDrag = false;
var disX = disY = 0;
oWins_title.onmousedown = function(event) {
var event = event || window.event;
bDrag = true;
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 - oWins.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWins.style.marginTop = oWins.style.marginLeft = 0;
oWins.style.left = iL + "px";
oWins.style.top = iT + "px";
return false;
};
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";
document.body.removeChild(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 = document.createElement("div");
maskDiv.id = "maskDiv";
maskDiv.style.position = "fixed";
maskDiv.style.top = "0";
maskDiv.style.left = "0";
maskDiv.style.zIndex = getZindex(popDivId) - 1;
maskDiv.style.backgroundColor = "#333";
maskDiv.style.filter = "alpha(opacity=70)";
maskDiv.style.opacity = "0.7";
maskDiv.style.width = "100%";
maskDiv.style.height = (document.body.scrollHeight + 50) + "px";
document.body.appendChild(maskDiv);
maskDiv.onmousedown = function() {
document.body.removeChild(document.getElementById("maskDiv"));
};
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.