當前頁面預覽和關閉消息彈框、獲取瀏覽器版本
點擊預覽打開一個消息框可查看內容;查看完畢,點擊關閉,關閉消息框
代碼:
<!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