当前页面预览和关闭消息弹框、获取浏览器版本
点击预览打开一个消息框可查看内容;查看完毕,点击关闭,关闭消息框
代码:
<!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