在進行網站開發的時候，為了使得網頁介面互動性更佳，使用者體驗效果更好，介面更簡單。常常需要我們實現點選某個按鈕或者連結，彈出一個帶有蒙層的登入效果。這裡我採用的是Jquery，也可以簡單進行轉換為js：

第一步：點選某個連結或者按鈕，呼叫函式彈出div和設定蒙層效果。

 <a href="javascript:void(0);" onclick="pop1()" style="color:#1857B5">[修改密碼]</a>

第二步：建彈出框的div

<div id="popframe1">
<img src="images/7.jpg" width="400px">
    <form>
    使用者帳號：<input type="text"/><br/>
    原 密 碼： <input type="password"/><br/>
    新 密 碼： <input type="password"/><br/>
    確認密碼： <input type="password"/><br/>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="確認" style="background-color:#4ab413;border-color:#67c300;border-radius:3px;width:80px;color:#FFFFFF"/>
        <input type="button" value="取消" style="width:80px" onclick="javascript:window.location.href='2.html'"/>
    </form>

第三步：建一個無內容的空的div做蒙層
</div><div class="fullbg"></div>
<script type="text/javascript" src="Mongolia.js"></script>

第四步：css:

/*先把彈出框的格式，大小，位置等設定好，並設定為不可見（visibility設定為hidden）z-index設定為2層疊效果比fullbg大即可*/

#popframe1{
    visibility: hidden;
    z-index:2;
    font-size: 12px;
    border:1px solid #3399FF;
    width:400px;
    height:250px;
    position:absolute;
    top:200px;
    left:620px;
    background-color:#FFFFFF;
    text-align:center;
}

/*給蒙層div背景色，透明度等設定好，並將其z-index設定為1*/

.fullbg{
    background-color:gray;
    left:0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    z-index: 1;
    filter: alpha(opacity=50);
}

第五步：利用js控制點選彈出，給蒙層賦值高寬，並使得彈出框的visibility為可見。

Mongolia.js:

function pop1(){
    var bh=$(window).height();
    var bw=$(window).width();
    $(".fullbg").css({
        height:bh,
        width: bw,
        display:"block"
    });
    $("#popframe1").css("visibility","visible");