李大仁博客

实现简单的类似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

Exit mobile version