这里我用代码来表示 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"; } }
