当前页面预览和关闭消息弹框、获取浏览器版本

点击预览打开一个消息框可查看内容；查看完毕，点击关闭，关闭消息框
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
	document.getElementById("span").innerHTML = "您的浏览器版本为："+getBrowser();
}
//获取浏览器版本
function getBrowser() {
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
var m = ua.match(re);
Sys.browser = m[1].replace(/version/, "'safari");
Sys.ver = m[2];

return Sys.browser + Sys.ver;
}


/**
 * 显示方法
*/
function showRetMsq(id,str1,str2){
	//创建DIV
	var autoCompanyObj = document.getElementById(id);
	autoCompanyObj.innerHTML="关闭";
	autoCompanyObj.href = "javaScript: closeMsgFrmae('"+id+"')";
	
	var newDiv = document.getElementById(id+"tempIframe");
	
	if(newDiv==null){
		//计算控件位置
		var top=autoCompanyObj.offsetTop; 
		var left=autoCompanyObj.offsetLeft;
		var autoCompanyObjTmp = autoCompanyObj;
		while(autoCompanyObjTmp = autoCompanyObjTmp.offsetParent)
	    {
			top+=autoCompanyObjTmp.offsetTop;
			left+=autoCompanyObjTmp.offsetLeft;
	    }
	       
		//创建iframe
		newDiv = document.createElement("iframe");
		newDiv.id= id+"tempIframe";
		newDiv.style.position = "absolute";
		newDiv.style.backgroundColor="#ffffff";
		newDiv.style.top = top+autoCompanyObj.offsetHeight+"px";
		newDiv.style.left = left+"px";
		newDiv.style.zIndex = "999";	
		newDiv.style.border = "solid";
		newDiv.style.borderWidth = "1px";
		newDiv.style.borderColor = "#acb6dd";	
		document.body.appendChild(newDiv);
		
		var str1 = "Hello World！";//要显示的内容。调方法的时候传入。这里是写的固定的
		
		//创建内容
		var iframeTextContent = '';
		iframeTextContent += ' <html><head></head><body><font size=2>';
		iframeTextContent += "***原因/说明：<br/><hr/>"+str1+"<br/>";
		//iframeTextContent += "解决方案："+str2;
		iframeTextContent += '</font></body>';
		iframeTextContent += ' </html>';
		newDiv.contentWindow.document.open();
		newDiv.contentWindow.document.write(iframeTextContent);
		newDiv.contentWindow.document.close();
	}
	newDiv.style.display="block";
}

/**
 * 关闭显示方法
*/
function closeMsgFrmae(id){
	
	var autoCompanyObj = document.getElementById(id);
	document.getElementById(id+"tempIframe").style.display="none";
	autoCompanyObj.innerHTML="预览";
	autoCompanyObj.href = "javaScript: showRetMsq('"+id+"',null,'')";
}
</script>
<center>
<span id="span"></span>
<table cellpadding="5" cellspacing="5" border="0">
	<tbody>
		<tr>
			<td>姓名：Azzan</td>
			<td>年龄：18</td>
			<td>详细介绍：<a href="javaScript: showRetMsq('atest',null,'')" id="atest">预览</a></td>
		</tr>
	</tbody>
</table>

<!-- <a href="javaScript: showRetMsq('atest',null,'')" id="atest">预览</a> -->
</center>
</body>
</html>
效果图：
图1
图2
当前页面预览和关闭消息弹框、获取浏览器版本

猜你喜欢
