div層，實現模式視窗/模態視窗/模式對話方塊
<!--
首先需要說明，這是個偽模式視窗，樣式好看，是在同一個頁面上顯示的div而已。
-->
<html>
<head>
<title>精簡模式視窗</title>
<style type="text/css">
/*層1的樣式*/
.div1{
/*本層要實現覆蓋模式視窗以外全部內容的半透明效果*/
background-color:#000000;/*背景色*/
position: absolute ;/*絕對定位，必選，使層絕對依照top,left的標準顯示，否則將不能實現覆蓋*/
top:0;/*層與頁面頂部距離*/
left:0;/*層與左側邊距離*/
display:none; /*層是否可見，初始化none不可見*/
filter:Alpha(opacity=30);/*過濾顏色，設定透明度（可見度）30，數越小越透明*/
}
/*層2的樣式*/
.div2{
/*本層顯示在最前端，其它控制元件均不可用*/
width:300px;/*顯示寬度*/
height:200px;/*顯示高度*/
position:absolute;/*絕對定位*/
z-index:2;/*優先順序*/
display: none;/*是否顯示*/
border:3px inset blue; /*邊框：寬度，樣式，顏色*/
background-color:#9999CC;/*背景色*/
/*當然你可以自定義新增或更改更多的樣式都無所謂*/
</style>
<script type="text/javascript">
//顯示的方法，說明：字首的div1、div2、body等，均為Id值
function show()
{
div1.style.display="inline";//設定層1顯示
div1.style.width=body.clientWidth;//設定層1寬度等於body寬度，width=100%也可以，不過有一些誤差，所以最好用這個
div1.style.height=body.clientHeight;//設定層1高度滿屏
div2.style.display="inline";//設定層2的顯示
div2.style.left=body.clientWidth/2-div2.clientWidth/2;//設定層2的距左位置居中演算法
}
//關閉顯示
function closeShow()
{
div1.style.display="none";
div2.style.display="none";
}
</script>
</head>
<body bgcolor="#CCFF00" id="body">
<!--測試按鈕點選觸發show()方法-->
<input type="button" value="測試按鈕" onClick="show()"/>
<div id="div1" class="div1"></div><!--這是要覆蓋網頁的層，不必寫任何東西-->
<div id="div2" class="div2"><!--這是彈出的模式視窗層-->
<!--巢狀在層中的層，用來做標題欄，按個人需求定義-->
<div id="div3" style="width:100%;height:20px; background-color:#0099FF" align="right">
<label onClick="closeShow()" style="font-weight:bolder;cursor:hand">
關閉 <!--用來關閉顯示，在label中加了onclick事件，與滑鼠懸停手的樣式-->
</label>
</div>
<br>
這個模式視窗很簡單吧！就是這個意思，具體樣式可以隨意設定<!--層中的內容-->
</div>
</body>
</html>
<!--
好累……呼～這些東西千篇一律，在網上不知道有多少，不過每個人都有不同的理解方式，一百個人用有一百種方式。我用最簡化的方法，加上我個人的詳細的理解～完成div模仿模式化視窗程式碼。希望對我和其他需要的人有更多的幫助！
以上程式碼特意加上各種註釋符，已經測試，可直接複製貼上至記事本，修改後綴名為html或htm即可執行！！！
注意：適合IE瀏覽器，若是其他瀏覽器沒有event，需加一些特殊的處理，在此不多說明咯。
轉載於：http://hi.baidu.com/slzs_zyt/blog/item/83d5710f1a170b2c6159f3eb.html
slzs....