登录小窗口遮盖层

代码摘要:

<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> 

小窗口遮盖层

相关文章: