在进行网站开发的时候,为了使得网页界面互动性更佳,用户体验效果更好,界面更简单。常常需要我们实现点击某个按钮或者链接,弹出一个带有蒙层的登录效果。这里我采用的是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/>
<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");