时间:2021-05-26
复制代码 代码如下:
//--------------------弹出层-------------------
//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"));
};
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.首先写一个遮罩层div,然后再写一个弹窗的div提示js弹窗js弹出DIV,并使整个页面背景变暗确定js代码:(把jq引进来)//弹窗functionsho
Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。
今天遇到的问题是,在弹出层后面的遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css。js代码//显示灰色JS遮罩层functions
复制代码代码如下:史上最精简,最强大的JS遮罩层效果,支持iefirefoxjQuery遮罩层//显示灰色JS遮罩层functionshowBg(ct,cont
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)Jquery遮罩层#BgDiv{background-color:#e3e3e3;posit