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);
}

你可能感兴趣的:(js)