点击注册、登录按钮时时显示灰色透明遮罩和登陆弹出框。弹出框居中显示
在body下面写遮罩(和header、footer等并齐)。
HTML代码:
<!-- 遮罩 -->
<div id="mask"></div>
<div id="login">
<div class="login">登陆框</div>
<span id="close">×</span>
</div>
CSS样式:
<style>
* {padding: 0;margin: 0;}
#mask {
width: 100%;/*遮罩铺满整个屏幕,只是屏幕大小*/
height: 100%;
background: rgba(0, 0, 0, 0.5);/*遮罩颜色及透明度*/
position: fixed;/*铺满整个页面,固定定位不会移动*/
z-index: 999;/*遮住所有东西,权重最大*/
}
#login {
width: 300px;/*弹出框大小*/
height: 300px;
background-color: #fff;
position: fixed;/*固定在屏幕正中间*/
top: 50%;
left: 50%;
margin-top: -150px;/*高的一半*/
margin-left: -150px;/*宽的一半*/
z-index: 1000;/*比遮罩层级高*/
}
#close {
position: absolute;/*关闭按钮定位*/
top: 2px;
right: 8px;
width: 20px;
height: 20px;
font-size: 20px;
cursor: pointer;
}
</style>
js:
<script>
var mask = document.getElementById('mask');
var login = document.getElementById('login');
var close = document.getElementById('close');
close.onclick = function(){
mask.style.display = "none";
login.style.display = "none";
}
</script>