div蒙层效果的制作

在进行网站开发的时候，为了使得网页界面互动性更佳，用户体验效果更好，界面更简单。常常需要我们实现点击某个按钮或者链接，弹出一个带有蒙层的登录效果。这里我采用的是Jquery，也可以简单进行转换为js：

第一步：点击某个链接或者按钮，调用函数弹出div和设置蒙层效果。

 <a href="javascript:void(0);" οnclick="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" οnclick="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");

类似的效果只要改改div部分和css部分就可以实现一个弹出蒙层的效果啦。