彈出視窗並且此視窗帶有半透明的遮罩層效果_javascript技巧

本章節介紹如何點擊一個按鈕實現彈出一個居中窗口，並且此窗口帶有半透明的遮罩層效果，此效果在當下比較流行，當然還有更為複雜的實現方式，當然效果也更為絢麗，以下介紹的程式碼能夠簡單實作此小姑。
程式碼如下:

複製程式碼 程式碼如下:

點擊這裡打開視窗 a>

關閉視窗

以上程式碼實作了我們的要求，以下簡單介紹一下它的實作過程。

一.實作原理:
在預設狀態下，遮罩層和視窗都是隱藏不可見的，當點擊連結之後，能夠使視窗和遮罩層顯示，並且將遮罩層設定為半透明狀態。此兩個元素都採用絕對定位同時設定居中視窗的z-index屬性值大於遮罩層，這樣就可以使其覆蓋在遮罩層之上。當點擊關閉按鈕的時候，能夠將遮罩層和視窗隱藏，原理大致如此。