相信 LightBox 之类的页面弹出窗口，大家在浏览的时候也应该是很常见的，实现起来也不算太困难，CG 今天把在上次发布的 ETP 项目源代码中的 JS 部分提取出来，方便大家学习和使用。 实现原理：利用 DIV 的浮动和层的重叠，将对话框的 Z-index 设置为最高就可以了另外对于遮罩层来说，只要使遮罩层在对话框层之下，其他页面元素之上即可，如果需要美观的话，可以设置半透明效果。
CSS 代码如下：
/* 消息框 */
#messageBox{
position;
border:2px solid #3B5A6E;
background-color:#FFFFCC;
display;
z-index:9999; /* 显示对话框置前 */
margin:0;
padding:0;
}
/* 消息框标题 */
#messageBox h2{
font-size:12px;
/* 图片形式 */
background(top.gif);
border-bottom:1px solid #3B5A6E;
margin:0;
color:#FFFFFF;
padding:6px 10px 4px 10px;
}
/* 遮罩层 */
#messageBoxMask{
position;
top:0; /* 从 (0，0) 开始 */
left:0;
background-color:#CCCCCC;
/* 以下控制透明效果，IE、FF*/
filter(opacity=50); /*IE*/
-moz-opacity:0.5; /* 兼容老版本的 FF */
opacity:0.5; /* Mozila 兼容 */
z-index:9998; /* 遮罩置前 */
display;
margin:0;
padding:0;
}
测试源代码下载地址： http://www.lidaren.com/code/MsgBox.zip