悬停信息框

最新推荐文章于 2024-10-15 12:34:10 发布

w93223010

最新推荐文章于 2024-10-15 12:34:10 发布

阅读量498

点赞数

分类专栏： JavaScript 文章标签： div function xhtml html

本文链接：https://blog.csdn.net/w93223010/article/details/7927880

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在页面中间悬停一个信息框，单击信息框外则关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
</head>
<body style="height:1000px">
    <div id="div_alert" 
	     style="width: 200px; 
		        height: 22px; 
				display:none;
				text-align:center;  
				background-color: Black; 
				color: White;
				position:fixed;
				border:solid 1px green;">
    </div>


    <script type="text/javascript">
//更新弹出提示信息框
function updateAlert(str){
	var odiv = document.getElementById("div_alert");
	odiv.style.display = "block";
	odiv.innerHTML=str;

	var sTop = document.documentElement.scrollTop || document.body.scrollTop; 
	var cHeight= document.documentElement.clientHeight || document.body.clientHeight; //整个页面的高度
	var mid = (cHeight - odiv.offsetHeight) / 2; 
	
	odiv.style.top =mid + "px";
	odiv.style.left = (1024-odiv.offsetWidth)/2;
}

document.onclick = function (event)  
{     
	var e = event || window.event;  
	var elem = e.srcElement||e.target;  
		  
	while(elem)  
	{   
		if(elem.id == "div_alert")  //判断点击事件，如果是指定div的id则返回，否则隐藏div
		{  
				return;  
		}  
		elem = elem.parentNode;       
	}  
	document.getElementById("div_alert").style.display = "none";//隐藏div  
}  
updateAlert("data");
    </script>


</body>
</html>

IE8.0已测