前端开发者| 手机前端开发教程 |
| 黑马前端开发教程 |
| web前端开发教程视频 |
思路：
创建html
<div id=”mask”></div> 创建遮罩层阴影
<div id=”login”> 创建登录框
<div class=”loginCon”>
<div id=”close”></div> 创建关闭按钮
</div>
</div>
效果：点击登录按钮弹出登录框 登录框理由关闭按钮
关闭登录框两种形式：1点击关闭按钮 2点击遮罩层
css注意事项：层级关系 登录框层级大于遮罩层
遮罩层的高度等于页面高度
获取页面高度 document.body.scrollHeight
登录框相对窗口垂直水平居中用css就能实现，如登录框 .login-box{ width:500px; height:600px; position:fixed; top:50%; left:50%; margin-top:-300px;(自身高度的一半) margin-left:-250px;(自身宽度的一半)}
html 代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>弹出层</title>
<style type=”text/css”>
#close {
background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/09/234021dt3rvxzt1lrl5phz.png)
no-repeat;
width: 30px;
height: 30px;
cursor: pointer;
position: absolute;
right: 5px;
top: 15px;
text-indent: -999em;
}
#mask {
background-color: #ccc;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
display: none;
}
#login {
position: fixed;
z-index: 1001;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -335px;
display: none;
}
.loginCon {
position: relative;
width: 670px;
height: 380px;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/09/234030lc9b0oc3za0qhogg.png)
#2a2c2e center center no-repeat;
background-size: 100%;
}
.login-btn {
font-family: 微软雅黑;
width: 100px;
height: 40px;
background: rgb(201, 57, 74);
text-align: center;
display: block;
line-height: 40px;
font-size: 14px;
opacity: 0.9;
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
}
</style>
</head>
<body>
<div id=”header”>
<div class=”container” id=”nav”>
<div id=”login-area”>
<button id=”btnLogin” hidefocus=”true” class=”login-btn”>
登录
</button>
</div>
</div>
</div>
<div id=”mask”></div>
<div id=”login”>
<div class=”loginCon”><div id=”close”></div></div>
</div>
<script>
window.onload = function() {
var oMask = document.getElementById(‘mask’)
var oClose = document.getElementById(‘close’)
var oBtn = document.getElementById(‘btnLogin’)
var oLogin = document.getElementById(‘login’)
var oHeight = document.body.scrollHeight
oMask.style.height = oHeight + ‘px’
console.log(oHeight)
oBtn.onclick = function() {
oMask.style.display = ‘block’
oLogin.style.display = ‘block’
}
oMask.onclick = oClose.onclick = function() {
oMask.style.display = ‘none’
oLogin.style.display = ‘none’
}
}
</script>
</body>
</html>
| web前端开发文字教程 |
| 达内前端开发最新教程 |
| web前端开发html教学视频教程下载 |
» 本文来自：前端开发者 » 《前端开发弹出层效果》
» 本文链接地址：https://www.rokub.com/6944.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册