JS DIV形式弹出

JS DIV模式弹出

在web前端开发中，某些情况下需要自定义弹出窗口。一般采用弹出DIV层的方式来实现这种效果，其基本原理是先弹出一个半透明的DIV空白层，使其长度和宽度等于html页面中body的长度和宽度。使其下层不可用，然后再弹出需要弹出的一个DIV信息层。

JS主要代码如下：

1.ShowMask函数是弹出遮挡层,SetMaskPos是设置遮挡层的位置;

ShowMask(false, "", "");
	var BoxID      = "tdzcxx";
	var BoxConID   = "tdzcxx_con";
	if($("#"+BoxID).size() <= 0){
		var html = "<div id=\""+BoxID+"\" class=\""+BoxID+"\">";
		html += "<div id=\""+BoxConID+"\" class=\""+BoxConID+"\"></div>";
		html += "<table width=\"90%\" border=\"0\" cellspacing=\"0\" cellpadding=\"10\" align=\"center\">";
		html += "<tr><td id=\"tdzcxx_txt\">";
		html +=  str;
		html += "</td></tr>";
		html += "</table>";
		html += "<table width=\"90%\" border=\"0\" cellspacing=\"0\" cellpadding=\"10\" align=\"center\">";
		html += "<tr>";
		html += "<td><a href=\"#\" id=\"tdzcxx_btn_ok\" class=\"layer_btn\">一　致</a></td>";
		html += "<td><a href=\"#\" id=\"tdzcxx_btn_no\" class=\"layer_btn\">不一致</a></td>";
		html += "</tr>";
		html += "</table>";
		html += "</div>";
		$("body").append(html);
		
		$("#tdzcxx_btn_no").click(function(){
			$(this).blur();
			$("#"+BoxID).hide();
			CloseMask();
			window.location.reload();
			return false;
		});
		$("#tdzcxx_btn_ok").click(function(){
			$(this).blur();
			$("#"+BoxID).hide();
			CloseMask();
			document.loginform.submit();
			return false;
		});

	}
	$("#"+BoxID).show();
	SetMaskPos("#"+BoxID);

设置遮挡层函数

function ShowMask(bol, title, content){
	var maskID = "#maskbox";
	var infoID = "#maskinfo";
	if($(maskID).size() <= 0){
		$("body").append(getNodeMask());
	}
	$(maskID).show();
	if(bol){
		if($(infoID).size() <= 0){
			$("body").append(getNodeMaskInfo(title, content));
			SetMaskPos(infoID);
		}
		$(infoID).show();
	}
}

设置遮挡层的长度和宽度与body长度和宽度分别一致;

function getNodeMask(){
	var nodeMask = document.createElement("div");
	nodeMask.id = "maskbox";
	nodeMask.style.width = $("body").width();
	nodeMask.style.height = $("body").height();
	return nodeMask;
}
function getNodeMaskInfo(title, content){
	var nodeMaskInfo = document.createElement("div");
	nodeMaskInfo.id = "maskinfo";
	var nodeMaskTitle = document.createElement("div");
	nodeMaskTitle.id = "masktitle";
	nodeMaskTitle.innerHTML = title;
	var nodeMaskContent = document.createElement("div");
	nodeMaskContent.id = "maskcontent";
	nodeMaskContent.innerHTML = content;
	nodeMaskInfo.appendChild(nodeMaskTitle);
	nodeMaskInfo.appendChild(nodeMaskContent);
	return nodeMaskInfo;
}
function SetMaskPos(oid){
	var scrollT = document.documentElement.scrollTop;
	var scrollL = document.documentElement.scrollLeft;
	var clientH = document.documentElement.clientHeight;
	var clientW = document.documentElement.clientWidth;
	var $obj = $(oid);
	var h = $obj.height();
	var w = $obj.width();
	var posL = Number(scrollL) + (Number(clientW) - Number(w))/2;
	var posT = Number(scrollT) + (Number(clientH) - Number(h))/2;
	$obj.css({"left":posL+"px", "top":posT+"px"});
}

PS: 有时候会出现信息弹出层和遮挡弹出层都被遮挡的情况，这个时候可以设置信息弹出层的css参数:z-index为一个较大值，使其在div中最上层

JS DIV形式弹出

相关推荐