js 팝업 div

3313 단어
//--------------------   -------------------
//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"));
	};
}

좋은 웹페이지 즐겨찾기