js彈出div並顯示遮罩層

複製代碼代碼如下:

//--------------------彈出層-------------------

//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;

var disX = disY = 0;

oWins.style.display = "block";

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";

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 = "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 = (window.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"));

};

}