实现简单的类似Lightbox效果的弹出对话框

相信LightBox之类的页面弹出窗口，大家在浏览的时候也应该是很常见的，实现起来也不算太困难，CG今天把在上次发布的ETP项目源代码中的JS部分提取出来，方便大家学习和使用。

实现原理：利用DIV的浮动和层的重叠，将对话框的Z-index设置为最高就可以了另外对于遮罩层来说，只要使遮罩层在对话框层之下，其他页面元素之上即可，如果需要美观的话，可以设置半透明效果。





CSS代码如下：

/*消息框*/

#messageBox{

	position:absolute;

	border:2px solid #3B5A6E;

	background-color:#FFFFCC;

	display:none;

	z-index:9999; /*显示对话框置前*/

	margin:0;

	padding:0;

}

/*消息框标题*/

#messageBox h2{

	font-size:12px;

	/*图片形式*/

	background:url(top.gif);

	border-bottom:1px solid #3B5A6E;

	margin:0;

	color:#FFFFFF;

	padding:6px 10px 4px 10px;

}



/*遮罩层*/

#messageBoxMask{

	position:absolute;

	top:0; /*从(0，0)开始*/

	left:0;

	background-color:#CCCCCC;

	/*以下控制透明效果，IE、FF*/

	filter:alpha(opacity=50); /*IE*/

	-moz-opacity:0.5; /* 兼容老版本的FF */

	opacity:0.5; /* Mozila兼容 */

	z-index:9998; /*遮罩置前*/

	display:none;

	margin:0;

	padding:0;

}

测试源代码下载地址：

http://www.lidaren.com/code/MsgBox.zip
--------------------------------------------------------------------------------------
- 版权声明：
- 如在本页面内无特别说明，本文内容均为[李大仁博客]原创，本文版权归[李大仁博客]所有。
- 欢迎转载，转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题： JS实现简单的类似Lightbox效果的弹出对话框
- 独立博客： 李大仁博客
- 永久链接：http://www.lidaren.com/archives/691
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布，最终显示内容和效果会与原文内容有所偏差，敬请谅解。