登录小窗口遮盖层
代码摘要:
<style>
#cover{
display:none;
position:fixed;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.2);
}
#coverShow{
display:none;
position:fixed;
z-index:2;
top:20%;
left:30%;
border-radius: 6px;
width:450px;
height:250px;
background: #fff;
border: 2px solid #36f;
}
form{
margin: 50px;
}
p{
margin: 25px;
}
input[type=text],[type=password]{
width:180px;
height:20px;
}
label{
display:inline-block;
width:80px;
height: 20px;
text-align:right;
padding-right:8px;
}
.btn{
width:70px;
height:35px;
font-size:16px;
margin:-2px 0 16px 0;
color:#fff;
border:2px solid #fff;
border-radius:4px;
margin-left:130px;
background:#3399cc;
}
.btn:hover{
background:#3366ff;
}
.btn1{
width:80px;
height:40px;
font-size:16px;
color:#fff;
border:2px solid #fff;
border-radius:4px;
background: #3c6;
}
</style>
<script>
function coverit()
{
var cover = document.getElementById("cover");
var covershow = document.getElementById("coverShow");
cover.style.display = 'block';
covershow.style.display = 'block';
setTimeout("showTime()",300000);
}
function showTime(){
var cover = document.getElementById("cover");
var covershow = document.getElementById("coverShow");
cover.style.display = '';
covershow.style.display = '';
}
</script>
</head>
<body>
<div id="cover"></div>
<div id="coverShow">
<form action="">
<p>
<label>账号:</label>
<input type="text" name="userid">
</p>
<p>
<label>密码:</label>
<input type="password" name="passwd">
</p>
<p>
<input type="button" value="登录" class="btn">
</p>
</form>
</div>
<input type="button" value="点击" onclick="coverit()" class="btn1">
</body>
<html>