彈出層效果是一個很實用的功能，很多網站都采用了這種方式實現登錄和注冊，比如百度：
彈出層的特點：點擊登錄或注冊的時候在頁面的中間部分彈出一個登錄或注冊區域并且頁面有一個遮罩層，而且登錄框在遮罩層之上，也就是登陸框的z-index值要大于遮罩層的z-index值。當點擊關閉或者遮罩層時關閉登錄或者注冊框(有的網頁沒有實現點擊遮罩層關閉登錄或注冊區域的功能。)。
最近也做了一個類似的彈出層的效果，先展示一下最終效果：
簡單的說一下實現的過程。
首先是遮罩層。遮罩層是在頁面動態加載的過程中創建的，因為遮罩層需要遮住整個頁面，所以遮罩層的高度是通過在JavaScript計算得到，而它的寬度是整個頁面的寬度，這個也很容易得到。還需要給它設一個z-index值，盡可能很大，因為需要遮住整個頁面。當然透明度也是必須的。
#mask{ background: #000;opacity: .6;filter:alpha(opacity=60);position:absolute;left:0;top:0;width:100%;height:1000px;/*動態獲取，這里設置高度是為了測試*/z-index:1000;}通過JavaScript動態創建遮罩層，然后添加到頁面中：
//創建遮罩層節點var oMask = document.createElement('div');oMask.id = 'mask';oMask.style.width = pageWidth + 'px';oMask.style.height = pageHeight + 'px';document.body.appendChild(oMask);上面代碼中的pageWidth和pageHeight就會頁面的寬度和高度值，通過
//獲取頁面的高度和寬度var pageHeight = document.documentElement.scrollHeight;var pageWidth = document.documentElement.scrollWidth;
獲取。這樣遮罩層就完成了。
再來說說彈出層的效果。
彈出層在頁面的中間部分顯示（這也是關鍵的步驟），也就是彈出層距離頁面左邊和右邊的距離相等，距離頁面上邊的距離和距離下邊的距離相等。注意是在可是區域中。
用公式表示就是：
left=right=(頁面可是區域寬度 - 彈出層寬度)/2;top=bottom=(頁面可是區域的高度-彈出層高度)/2
而這里可是區域的寬度等于頁面的寬度，因為頁面底部米有滾動條。底部有滾動條的網頁也是奇葩啊。設置它的left和top值之前必須已經將它添加到頁面當中去了，否則無法設置。
oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';
武林網提醒大家需要注意，這里彈出層的定位方式是固定定位的，而且它的z-index值要大于遮罩層的。
#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}最后就是給關閉按鈕添加事件響應函數了。
EventUtil.addHandler(oClose, 'click', function(){document.body.removeChild(oMask);document.body.removeChild(oLogin);});EventUtil是一個為了兼容瀏覽器事件處理函數而寫的一個對象，具體的實現在這里：
var EventUtil = {//添加事件處理函數addHandler: function(element, type, handler){if(element.addEventListener){element.addEventListener(type, handler, false);}else if(element.attachEvent){element.attachEvent('on' + type, handler);}else{element['on' + type] = handler;}},//刪除事件處理函數removeHandler: function(element, type, handler){if (element.removeEventListener) {element.removeEventListener(type, handler, false);}else if(element.detachEvent){element.detachEvent('on' + type, handler);}else{element['on' + type] = null;}}};到這里大部分的內容就完成了，其實現實起來很簡單。只要知道了原理，剩下的就是實現方式了。
點擊登錄按鈕那個功能就不介紹了，加個事件處理函數就行了。
源碼(寫的不規范)：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>遮罩層效果</title><style type="text/css">*{margin:0;padding:0;}body{background: #ccc;font-family: "微軟雅黑";height:2000px;/*用于測試*/}.clearfix:after,.clearfix:before{content: "";display: block;}.clearfix{clear: both;visibility: hidden;}img{border: 0;}#header{width:100%;height:60px;line-height:60px;background: #000;}#header a{display: block;width:60px;height:60px;color:#fff;text-decoration: none;font-size:15px;background:#c9394a;text-align: center;float: right;margin-right:138px;}#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}.title{height:50px;background: #c9394a;line-height: 50px;}.title span{display:inline-block;color:#fff;padding-left:20px;}.title a{display: block;float:right;background: url(close.png) no-repeat center;width: 30px;height:30px;padding:20px 20px 0 0;}.login_content form{padding-top:40px;width:340px;margin: 0 auto;}.inp_group{margin-bottom:30px;}#username{background: url(sprite.png) no-repeat 0 0;}#passwd{background: url(sprite.png) no-repeat 0 -46px;}input[type=password],input[type="text"]{width:272px;height:40px;outline: none;padding-left:48px;border: 1px solid #000;font-size:15px;}input[type=button]{width:318px;height:38px;margin:0 auto;border:1px solid #f00000;background-color:#f00000;color:#fff;font-size:15px;outline:none;cursor:pointer;transition:all 1s;}input[type=button]:hover{background:#ff0000;border:1px solid #ff0000;}#mask{background: #000;opacity: .6;filter:alpha(opacity=60);position:absolute;left:0;top:0;width:100%;height:1000px;/*動態獲取，這里設置高度是為了測試*/z-index:1000;}</style><script type="text/javascript" src="base.js"></script><script type="text/javascript">function popLogin(){//獲取頁面的高度和寬度var pageHeight = document.documentElement.scrollHeight;var pageWidth = document.documentElement.scrollWidth;//可視區域的高度和寬度var clientHeight = document.documentElement.clientHeight;//創建遮罩層節點var oMask = document.createElement('div');oMask.id = 'mask';oMask.style.width = pageWidth + 'px';oMask.style.height = pageHeight + 'px';document.body.appendChild(oMask);//創建登錄節點var oLogin = document.createElement('div');oLogin.id = 'login';oLogin.innerHTML = '<div class="title"><span>登錄</span><a href="javascript:;" id="close"></a></div><div class="login_content"><form method="post" action="?"><div class="inp_group"><input type="text" name="username" id="username" placeholder="請輸入登錄郵箱"></div><div class="inp_group"><input type="password" name="password" id="passwd" placeholder="請輸入密碼"></div><input type="button" value="登錄"></form></div>';document.body.appendChild(oLogin);var loginWidth = oLogin.offsetWidth;var loginHeight = oLogin.offsetHeight;console.log(clientHeight);oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';var oClose = document.getElementById('close');EventUtil.addHandler(oClose, 'click', function(){document.body.removeChild(oMask);document.body.removeChild(oLogin);});EventUtil.addHandler(oMask, 'click', function(){document.body.removeChild(oMask);document.body.removeChild(oLogin);});}window.onload = function(){var oLoginBtn = document.getElementById('login_btn');EventUtil.addHandler(oLoginBtn, "click", popLogin);};</script></head><body><div id="header"><a href="javascript:;" id="login_btn">登錄</a></div><!--<div id="mask"></div>--><!--<div id="login"><div class="title"><span>登錄</span><a href="javascript:;"></a></div><div class="login_content"><form method="post" action="?"><div class="inp_group"><input type="text" name="username" id="username" placeholder="請輸入登錄郵箱"></div><div class="inp_group"><input type="password" name="password" id="passwd" placeholder="請輸入密碼"></div><input type="button" value="登錄"></form></div></div>--></body></html>代碼到此結束，本文寫的不好，還請各位大俠提出寶貴意見。同時感謝大家一直以來對腳本之間網站的支持，在此，武林網小編祝大家元旦快樂。
新聞熱點
疑難解答
