这里我用代码来表示
html部分
<!-- mask -->
<div id="mask"></div>
<!-- /mask -->
<!-- 登录表单 -->
<div class="login-form">
<div class="close" id="close-login">X</div>
<h3>管理员登录</h3>
<input type="text" name="username" placeholder="账号" id="username">
<input type="password" name="password" placeholder="密码" id="password">
<button class="login-btn" id="login">登 录</button>
</div>
<!-- /登录表单 -->
<!-- 头部 -->
<input class="attention" type="button" οnclick=""value="管理员登录" id="atten-btn">
css部分
/* 遮罩层 */
#mask{
display: none;
position: fixed;
width: 100%;
height:100%;
top: 0;
left: 0;
background-color: #000;
filter:alpha(opacity=70); /*IE滤镜,透明度50%*/
-moz-opacity:0.7; /*Firefox私有,透明度50%*/
opacity:0.7;/*其他,透明度50%*/
z-index:9;
}
/* 遮罩层 */
/* 登录表单 */
.login-form{
display: none;
position: absolute;
left: 50%;
top: 50%;
width: 386px;
height: 288px;
margin: -144px 0 0 -193px;
z-index: 10;
background: #fff;
}
.login-form .login-bd{
margin:30px 0 0 40px;
}
.login-form .close{
float: right;
font-size: 14px;
font-weight: bold;
line-height: 1;
margin: 10px 10px 0 0;
color: #0e0e0e;
cursor: pointer;
}
.login-form h3{
margin:20px 0 20px 40px;
font-size: 18px;
font-weight: normal!important;
color:#444;
line-height:38px;
}
.login-form input{
display: block;
width:296px;
height:44px;
font-size: 16px;
text-indent: 10px;
background-color: #fafafa;
border:1px solid #f1f1f1;
box-shadow: 0 1px 1px #e6e6e6;
color:#999;
margin:0 0 16px 40px;
}
.login-form .login-btn{
width: 296px;
height: 46px;
font-size: 16px;
color:#ffffff;
margin: 14px 0 0 40px;
background-color: #2ab14f;
border: none;
}
/* 登录表单 */
让按钮反应的代码这里用到了js
// fadeModal();//显示登录框
window.onload = function(){
var atten = document.getElementById("atten-btn");
atten.onclick = function fadeModal() {
var mask = document.getElementById('mask');
console.log(mask);
mask.style.display = "block";
var loginForm = document.getElementsByClassName('login-form')[0];
console.log(loginForm);
loginForm.style.display = "block";
}
//关闭窗口
var close= document.getElementById("close-login");
close.onclick =function fadeOutLogin() {
var mask = document.getElementById('mask');
console.log(mask);
mask.style.display = "none";
var loginForm = document.getElementsByClassName('login-form')[0];
console.log(loginForm);
loginForm.style.display = "none";
}
}