【原创】好用的弹出窗口，DIV弹出层

example example example example
example example 提示窗口 example
example example example example

效果如上所示:
相关代码：

<script type="text/javascript">
	var popup_target;
	var popup_mouseposX;
	var popup_mouseposY;
	// ----- popup_exit ------------------------------------------------------------
	function popup_exit(str)
	{
		if(str == 'init'){
			//document.getElementById("tableid").attachEvent("onclick",popup_exit);
			document.getElementById("tableid").onclick = popup_exit;
			return;
		}
		var element = document.getElementById('popup3');
		element.style.visibility = 'hidden';
		element.style.display = 'none';
	}
	// ----- popup_show ------------------------------------------------------------
	function popup_show(id)
	{
		element = document.getElementById('popup'+id);
		element.style.position = "absolute";
		element.style.visibility = "visible";
		element.style.display = "block";
		element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+10)+'px';
		element.style.top = (document.documentElement.scrollTop +popup_mouseposY+10)+'px';
		//document.getElementById("tableid").attachEvent("onclick",function(){popup_exit('init');});
		document.getElementById("tableid").onclick = function(){popup_exit('init');}
	}
	// ----- popup_mousepos --------------------------------------------------------
	function popup_mousepos(e)
	{
		var ie = navigator.appName == "Microsoft Internet Explorer";
		popup_mouseposX = ie ? window.event.clientX : e.clientX;
		popup_mouseposY = ie ? window.event.clientY : e.clientY;
	}
	// ----- Attach Events ---------------------------------------------------------
	document.attachEvent('onmousedown', popup_mousepos);
</script>

<style>
div.sample_popup
{
	z-index: +1; 
	cursor:default;
	border: 1px solid #34A2DC;
	width: 194px;
	height: 100px;
	background:#FFF;
	font-size:12px;
}
</style>


<body>
<table id='tableid'>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td><a href="javascript:void(0)" onclick="popup_show(3)" >提示窗口</a></td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
<td>example</td>
</table>
<div class="sample_popup" id="popup3" style="visibility: hidden; display: none;">
这是提示窗口的正文区域，你可以在这里填写任何内容。<br />
</div>

</body>


注意点：

1、popup_show 是将窗口显现的函数，popup_exit 是讲窗口关系的函数，popup_mousepos是获取鼠标点击位置的函数

2、document.getElementById("tableid").onclick = function(){popup_exit('init');}是为了传入参数init，

     因为在绑定的时候，会运行一下popup_exit函数，因此传入init参数可以将popup_exit绑定上去

3、整体运行情况：点击“弹出窗口”，则窗口显现出来，对table进行时间绑定；点击“table”，则关闭窗口

posted @ 2011-06-15 18:24  春哥也编程  阅读(1011)  评论(0)    收藏  举报