怎样让登陆框盖在网页主体,点击按钮弹出登陆框
来源:互联网 发布:apmserv php升级5.6 编辑:程序博客网 时间:2024/04/29 21:17
这里我用代码来表示
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" onclick=""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";
}
}
- 怎样让登陆框盖在网页主体,点击按钮弹出登陆框
- 点击登陆 弹出登陆框
- 实现点击按钮弹出登陆框并且可移动操作
- JS+CSS点击登陆按钮遮罩弹出登陆框代码
- 点击登陆弹出层,层是登陆框
- 点击登陆 弹出登陆框,可以移动的
- 漂亮的点击弹出的登陆框
- 点击按钮弹出网页
- 点击按钮弹出框
- android 自定义登陆弹出框
- android 自定义登陆弹出框
- android 自定义登陆弹出框
- jQuery按键弹出登陆框
- 点击登陆链接在本页面弹出一个登陆窗口效果
- 关于centos7.0登陆界面闪烁无法登陆(类似一直在点击解锁按钮)
- 找了很久,终于让我找到了,登陆界面登陆按钮随着输入法键盘的弹出而动态改变
- 点击按钮弹出下载框
- 7080登陆界面点击服务器管理按钮,无法弹出窗口,报错
- TCP/IP协议 <一>
- 根据一个树的中序遍历和前序遍历数据,还原一个二叉树的思考
- C 语言--运算符优先级
- 加减乘除与赋值 算术运算符
- 基础练习 字符串的对比
- 怎样让登陆框盖在网页主体,点击按钮弹出登陆框
- linux mount过程
- 【Struts2学习笔记】struts2.5使用通配符配置action跳转
- ZYNQ TIMER定时器中断
- 从零移植uboot 2017 到nuc970(第十二天)
- 【数据结构】:由小米的一道面试题入手并查集
- opencv mat相关资料整理
- 简单的一个用定时器控制的流水灯c程序
- MySQL InnoDB事务模型