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

一时失言乱红尘 2022-06-14 02:49 147阅读 0赞

点击预览打开一个消息框可查看内容；查看完毕，点击关闭，关闭消息框

代码：

<!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>
    
    
    </center>
    </body>
    </html>

效果图：

图1

![Center][]

图2

![Center 1][]

[Center]: /images/20220614/a997556f0ce24670a3ddd4b02cdea5dc.png
[Center 1]: /images/20220614/fcab51321c954c66955560c428cf2a61.png