html/css實現陰影蒙版覆蓋原網頁並顯示浮框的功能

在提供用戶修改資料/密碼等功能的時候，每每但願給用戶這樣的使用體驗，在不跳轉，不彈框的狀況下完成對這些功能的操做。

這能夠經過一種效果來實現，在同一頁面下陰影覆蓋整個當前網頁並使得原網頁中元素沒法使用，同時讓可使用的特定的修改框浮於陰影之上

以下面的效果示例：

思路是設置一個div做爲body元素的直接子元素，讓其width和height均爲100%,而後讓它在一開始處於隱藏狀態，而中間修改框頁一樣在一開始隱藏。

此外，二者均使用絕對定位position:absolute;以使其脫離html的文檔流從而不影響其餘後續元素的定位。

而後加入與按鈕綁定的js函數用於控制它們的顯示與隱藏（修改display屬性便可）。至於爲何後面原網頁的那些元素都用不了呢，是由於他們都被那個width和height均爲100%的div給蓋住了。蓋的方式經過調節z-index屬性獲得，固然，浮於上面的修改框該值更大。

具體示例代碼以下

能夠參考http://www.csharpwin.com/dotnetspace/2415.shtml