http://rhinohorns.blogspot.com/2007/11/blog-post_21.html 頁面外罩對話框效果

這是一個最近還滿常見到的頁面對話框效果，會呈現出對話框明亮，而頁面其它四週圍偏暗，好處是讓使用者很明確的知道目前正在使用的對話框。這篇碼是較平舖式的，方便理解及重整。

第一部分是 css，需要一個半透明的外罩效果，這裡是設 70%，還有一個要注意的是「z-index」，外罩需在對話框之下頁面之上，所以設的數字要比對話框小些，比頁面中的物件大些。

/* 外罩 */<br />.overlay_sh{<br />    position:absolute;<br />    top:0;<br />    left:0;<br />    opacity:0.7;<br />    filter:alpha(opacity=70);<br />    visibility:hidden;<br />    background-color:#000;<br />    z-index:90;<br />}<br /><br />/* 對話框 */<br />.setDilg_sh{<br />    top:0;<br />    left:0;<br />    position:absolute;<br />    visibility:hidden;<br />    background-color:#fff;<br />    z-index:100;<br />}

第二部分是設定外罩長寬涵蓋整個頁面並顯示/隱藏、對話框的置中顯示/隱藏處理碼，這裡以傳入操作塊 ID 來指定展現的對話框。

var objHandle_sh = 0;<br /><br />//秀出遮罩及指定操作塊<br />function showOverlay_sh(dilgId){<br />    var pageSize = getPageSize();<br />    var pageScroll = getPageScroll();<br />    <br />    var overlay = document.getElementById("overlay_sh");<br />    overlay.style.width = pageSize[0];<br />    overlay.style.height = pageSize[1];<br />    overlay.style.visibility = "visible";<br />    <br />    var dilg = document.getElementById(dilgId);<br />    var dilgWidth = dilg.offsetWidth;<br />    var dilgHeight = dilg.offsetHeight;<br />    <br />    dilg.style.left = (pageSize[2] - dilgWidth)/2 + pageScroll[0];<br />    dilg.style.top = (pageSize[3] - dilgHeight)/2 + pageScroll[1];<br />    dilg.style.visibility = "visible";<br />    <br />    objHandle_sh = dilg;<br />    window.onscroll = moveOnShow_sh;<br />}<br /><br />//關閉遮罩及指定操作塊<br />function closeOverlay_sh(dilgId){<br />    var overlay = document.getElementById("overlay_sh");<br />    overlay.style.visibility = "hidden";<br />    <br />    var dilg = document.getElementById(dilgId);<br />    dilg.style.visibility = "hidden";<br />    <br />    objHandle_sh = 0;<br />}

至於取得頁面長寬、捲軸位置及操作塊定位的工具函式可直接參考示範頁的原始碼。

很簡單的效果，卻十分友善。