js弹出div并显示遮罩层

2019-12-01 作者:亚洲城动态   |   浏览(136)

复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if { creatMask; } var oWins = document.getElementById; var oWins_title = document.getElementById; var bDrag = false; var disX = disY = 0; oWins.style.display = "block"; oWins_title.onmousedown = function { 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 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 { var oWins = document.getElementById; oWins.style.display = "none"; window.parent.document.body.removeChild(window.parent.document.getElementById; } // 获取弹出层的zIndex function getZindex { var popDiv = document.getElementById; var popDivZindex = popDiv.style.zIndex; return popDivZindex; } // 创建遮罩层 function creatMask { // 参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径 var maskDiv = window.parent.document.createElement; maskDiv.id = "maskDiv"; maskDiv.style.position = "fixed"; maskDiv.style.top = "0"; maskDiv.style.left = "0"; maskDiv.style.zIndex = getZindex - 1; maskDiv.style.backgroundColor = "#333"; maskDiv.style.filter = "alpha"; 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.onmousedown = function() { window.parent.document.body.removeChild(window.parent.document.getElementById; }; }

js弹出div并显示遮罩层

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

}; 

 

弹出div显示遮罩层的效果,想必大家都有见到过吧,下面有个示例,大家可以参考下 代码如下: //--------------------弹出...

本文由yzc216亚洲城发布于亚洲城动态,转载请注明出处:js弹出div并显示遮罩层

关键词: 亚洲城官网 yzc216亚洲城