彈出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")); }; }