div蒙层效果的制作

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

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

 [修改密码]

第二步：建弹出框的div

   

    用户帐号：

    原 密 码：

    新 密 码：

    确认密码：

                     
       
       
   

第三步：建一个无内容的空的div做蒙层

第四步：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部分就可以实现一个弹出蒙层的效果啦。