基于Javascript實現彈出頁面效果_javascript技巧

彈出層的特點：點擊登錄或注冊的時候在頁面的中間部分彈出一個登錄或注冊區域并且頁面有一個遮罩層，而且登錄框在遮罩層之上，也就是登陸框的z-index值要大于遮罩層的z-index值。當點擊關閉或者遮罩層時關閉登錄或者注冊框(有的網頁沒有實現點擊遮罩層關閉登錄或注冊區域的功能。)。

最近也做了一個類似的彈出層的效果，先展示一下最終效果：

簡單的說一下實現的過程。

首先是遮罩層。遮罩層是在頁面動態加載的過程中創建的，因為遮罩層需要遮住整個頁面，所以遮罩層的高度是通過在JavaScript計算得到，而它的寬度是整個頁面的寬度，這個也很容易得到。還需要給它設一個z-index值，盡可能很大，因為需要遮住整個頁面。當然透明度也是必須的。

通過JavaScript動態創建遮罩層，然后添加到頁面中：　　

上面代碼中的pageWidth和pageHeight就會頁面的寬度和高度值，通過

獲取。這樣遮罩層就完成了。

再來說說彈出層的效果。

彈出層在頁面的中間部分顯示（這也是關鍵的步驟），也就是彈出層距離頁面左邊和右邊的距離相等，距離頁面上邊的距離和距離下邊的距離相等。注意是在可是區域中。

用公式表示就是：

left=right=(頁面可是區域寬度 - 彈出層寬度)/2;top=bottom=(頁面可是區域的高度-彈出層高度)/2

而這里可是區域的寬度等于頁面的寬度，因為頁面底部米有滾動條。底部有滾動條的網頁也是奇葩啊。設置它的left和top值之前必須已經將它添加到頁面當中去了，否則無法設置。

腳本之家提醒大家需要注意，這里彈出層的定位方式是固定定位的，而且它的z-index值要大于遮罩層的。

最后就是給關閉按鈕添加事件響應函數了。

EventUtil是一個為了兼容瀏覽器事件處理函數而寫的一個對象，具體的實現在這里：

到這里大部分的內容就完成了，其實現實起來很簡單。只要知道了原理，剩下的就是實現方式了。

點擊登錄按鈕那個功能就不介紹了，加個事件處理函數就行了。　　

源碼(寫的不規范)：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于Javascript實現彈出頁面效果_javascript技巧

基于Javascript實現彈出頁面效果_javascript技巧:彈出層效果是一個很實用的功能，很多網站都采用了這種方式實現登錄和注冊，比如百度： 彈出層的特點：點擊登錄或注冊的時候在頁面的中間部分彈出一個登錄或注冊區域并且頁面有一個遮罩層，而且登錄框在遮罩層之上，也就是登陸框的z-index值要大于遮罩層的z

推薦度：

點擊下載本文 文檔為doc格式