您好,欢迎访问一九零五行业门户网

js弹出div并显示遮罩层_javascript技巧

复制代码 代码如下:
//--------------------弹出层-------------------
//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 il = il > maxl ? maxl : il;
it = 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));
};
}
其它类似信息

推荐信息