简易模态框 初学者
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 30px;
background-color: white;
}
a{
float: left;
line-height: 30px;
text-align: center;
color: black;
text-decoration: none;
}
a:nth-child(1){
margin-left: 30px;
}
a:nth-child(2){
margin-left: 10px;
}
.mask{
width: 100%;
height: 100%;
position: fixed; /*布满整个页面，当滑动条向下滑的时候依然显示整个页面都有*/
background: rgba(0,0,0,0.3);
top: 0;
left: 0;
z-index: 999;
}
.banner{
width: 300px;
height: 200px;
background: #FFFFFF;
position: fixed;
top: 40%;
left: 40%; /*这里定位一定要写了left跟top*/
z-index: 1000;
}
#close{
float: right;
margin-right: 10px;
cursor: pointer;
}
.mask,.banner{
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var login = document.getElementById('login');
var omask = document.getElementById('mask');
var obanner = document.getElementById('banner');
var oclose = document.getElementById('close');
login.onclick = function(){
omask.style.display = 'block';
obanner.style.display = 'block';
}
oclose.onclick = function(){
omask.style.display = 'none';
obanner.style.display = 'none';
}
}
</script>
</head>
<body>
<div class="box">
<div class="top">
<a href="#" id="login">登录</a>
<a href="#" id="register">注册</a>
</div>
<div>
<img src="img/捕获_副本.jpg" />
</div>
</div>
<div class="mask" id="mask"></div>
<div class="banner" id="banner">
<p id="close">x</p>
</div>
</body>
</html>
效果如图：
