相信 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