效果图:(简单实现功能)
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹出层效果</title>
<style>
a{
display:block;
height:30px;
background:#ef6160;
color:#fff;
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
}
a:hover{
cursor:pointer;
}
.btn-log{
width:100px;
}
#mask{
background:#000;
opacity:0.75;
filter:alpha(opacity:75);
width:100%;
position:absolute;
left:0;
top:0;
z-index:1000;
display:none;
}
#login{
position:fixed;
left:25%;
top:25%;
z-index:1001;
}
.loginCon{
width:670px;
height:380px;
background:#fff;
position:relative;
}
.loginCon .close{
width:40px;
color:#fff;
position: absolute;
right:10px;
top:10px;
}
</style>
</head>
<body>
<a class="btn-log" onclick="popUp();">弹出层效果</a>
<div class="con"></div>
<div id="mask">
<div id="login">
<div class="loginCon">
<a class="close" onclick="closeBtn();">关闭</a>
</div>
</div>
</div>
<script>
window.onload= function () {
//获取页面的高度
var screenH=document.documentElement.clientHeight;
//滚动条滚动高度
var scrollH=document.documentElement.scrollHeight;
var oMask=document.getElementById("mask");
//这样写是在网页特别长,用户拉动滚动条的时候弹出层也要随之变长以覆盖整个页面可视区
oMask.style.height=screenH+scrollH+"px";
};
function popUp(){
var oMask=document.getElementById("mask");
oMask.style.display="block";
}
function closeBtn(){
var oMask=document.getElementById("mask");
oMask.style.display="none";
}
</script>
</body>
</html>