JS蒙板弹出+关闭


function showMenu(content) {
// 创建蒙板DIV
var bgObj = document.createElement("div");
// 蒙板样式
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:100%;"
+ "height:100%;filter:Alpha(Opacity=30);opacity:0.3;"
+ "background-color:#000000;z-index:101;";
// 使用蒙板
document.body.appendChild(bgObj);
// 创建菜单栏
var menuDiv = document.createElement("div");
// 菜单栏样式
menuDiv.style.cssText = "width: 540px;height: 262px;position: absolute;"
+ "top: 30%;left: 50%;margin: -131px 0 0 -270px"
+ ";text-align:center;background-color:white;padding:1px;line-height:22px;z-index:102;";
// 使用菜单栏
document.body.appendChild(menuDiv);
var top = getPos(menuDiv)[0] - 10;
var left = getPos(menuDiv)[1] + 520;
// 创建关闭按钮
var closeBtn = document.createElement("img");
closeBtn.onclick = function() {
document.body.removeChild(bgObj);
document.body.removeChild(menuDiv)
document.body.removeChild(closeBtn);
};
closeBtn.id = "closeBtn";
// 关闭按钮样式
closeBtn.style.cssText = "height:31px;width:31px;display:block;z-index:103;position:absolute;"
+ "top:" + top + ";left:" + left + ";cursor: pointer;";
// 填充关闭按钮内容
closeBtn.src = "Images/Main/closeImg.png";
// 使用关闭按钮
document.body.appendChild(closeBtn);
// 填充菜单栏内容
menuDiv.innerHTML = content;
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}

//获取控件绝对位置
function getPos(active) {
var t = active.offsetTop;
var l = active.offsetLeft;
while (active = active.offsetParent) {
t += active.offsetTop;
l += active.offsetLeft;
}
return new Array(t,l);
}

你可能感兴趣的:(其他)