JS實現彈出層效果

很多時候我們想去某某網站干點什么的時候，就會讓我們先注冊登錄后才可以訪問內容，而現在很多網站注冊登錄的時候都會有一種遮罩層的效果，就是背景是帶有透明度的黑色遮罩，蓋滿整個網站，然后登錄框彈出固定在屏幕的居中位置。那么，今天就練練這個實用而簡單的效果吧。PS：這個是我學習后練習的demo！

首先，需要有一個按鈕來模擬登錄：

<button id="btnLogin"class="login-btn">登錄</button>

然后呢，我們想通過點擊這個按鈕實現這樣一個效果：

從上面這張圖片，我們可以看到，灰色背景就是遮罩層，而淺藍色的區域就是登陸框位置所在了。OK，下面先看一下HTML結構和css樣式：

<div id="mask"></div>  //遮罩層
<div id="login">       //登陸框包裹層
      <div id="loginCon">  //表單內容
          <div id="close">點擊關閉</div>  //關閉按鈕
          我是登錄框喲！
      </div>
 </div>

這里只是將HTML結構拿出來講一下，但是下面我們是通過JS來創建它們的，所以這里只是為了方便我們理解，並不需要放在html文件里。

CSS樣式：

#close{ 
    background:url(img/close.png) no-repeat; 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:5px; 
    text-indent:-999em;
    }
#mask{ 
    background-color:#ccc;
    opacity:0.7;
    filter: alpha(opacity=70); 
    position:absolute; 
    left:0;
    top:0;
    z-index:1000;
    }
#login{ 
    position:fixed;
    z-index:1001;
    }
.loginCon{ 
    position:relative; 
    width:670px;
    height:380px;
    background:lightblue;
    border:3px solid #333;
    text-align: center;
    }

css樣式中需要注意一下z-index屬性，因為我們需要讓遮罩層蓋住除了登錄框之外所有的頁面內容，所以，需要確保登錄框的層次最高，遮罩層次之，所以一般將這兩個的z-index屬性值設置為比較高的數值，但遮罩層要比登陸框少一層。然后還有一點就是遮罩層必須設置透明度，不然就太難看了，用戶體驗極其不好！

JS實現代碼：

function dialog(){
    //獲取頁面的高度和寬度
    var sWidth=document.body.scrollWidth || document.documentElement.scrollWidth;
    var sHeight=document.body.scrollHeight || document.documentElement.scrollHeight;
    
    //獲取頁面的可視區域高度和寬度
    var wHeight=document.documentElement.clientHeight || document.body.clientHeight;
    
                //創建遮罩層
    var oMask=document.createElement("div");
    oMask.id="mask";
    oMask.style.height=sHeight+"px";
    oMask.style.width=sWidth+"px";
    document.body.appendChild(oMask);            //添加到body末尾
      
               //創建登錄框
    var oLogin=document.createElement("div");
    oLogin.id="login";
    oLogin.innerHTML="<div class='loginCon'><div id='close'>點擊關閉</div>我是登錄框喲！</div>";
    document.body.appendChild(oLogin);
    
    //獲取登陸框的寬和高
    var dHeight=oLogin.offsetHeight;
    var dWidth=oLogin.offsetWidth;

    //設置登陸框的left和top
    oLogin.style.left=sWidth/2-dWidth/2+"px";
    oLogin.style.top=wHeight/2-dHeight/2+"px";

    //獲取關閉按鈕
    var oClose=document.getElementById("close");
    
    //點擊關閉按鈕和點擊登陸框以外的區域都可以關閉登陸框
    oClose.onclick=oMask.onclick=function(){
        document.body.removeChild(oLogin);
        document.body.removeChild(oMask);
    };
}
                    
window.onload=function(){
    var oBtn=document.getElementById("btnLogin");
    //點擊登錄按鈕
    oBtn.onclick=function(){
        dialog();
    }
                
}

這種方法是通過JS在事件綁定里動態創建和移除這些標簽，然后設置他們的 id 和 style 屬性。當然，我們也可以將HTML結構先放在html文件里，默認情況下隱藏它們，然后在事件綁定里控制它們的顯示與隱藏即可！