遮罩层小特效

今天学了一个遮罩层的特效，主要用在网页里面注册页面和登陆页面的使用：

　　　　<style>
　　　　* {
　　　　margin: 0px;
　　　　padding: 0px;
　　　　}

　　　　#mask {
　　　　 100%;
　　　　/*height: 500px;*/
　　　　background-color: black;
　　　　opacity: 0.5;
　　　　position: fixed;
　　　　top: 0px;
　　　　left: 0px;
　　　　z-index: 990;
　　　　}

　　　　#login {
　　　　 300px;
　　　　height: 200px;
　　　　position: fixed;
　　　　/*top: 50px;
　　　　left: 200px;*/
　　　　background-color: royalblue;
　　　　z-index: 999;
　　　　}

　　　　#login-close {
　　　　 50px;
　　　　height: 50px;
　　　　position: absolute;
　　　　top: 10px;
　　　　right: 10px;
　　　　background-color: red;
　　　　　　}
　　　　</style>

　　　　</body>

　　　　<script>
　　　　// alert(document.documentElement.clientHeight);
　　　　function loginShow() {
　　　　var mask = document.createElement("div");
　　　　mask.id = "mask";
　　　　mask.style.height = document.body.clientHeight + "px";
　　　　mask.onclick = function() {
　　　　close(mask);
　　　　close(login);
　　　　// alert(this);
　　　　}
　　　　document.body.appendChild(mask);
　　　　// alert(this);

　　　　var login = document.createElement("div");
　　　　login.id = "login";
　　　　var height = document.documentElement.clientHeight;
　　　　var width = document.documentElement.clientWidth;
　　　　login.style.top = height / 2 - 100 + "px";
　　　　login.style.left = width / 2 - 150 + "px";

　　　　var login_close = document.createElement("div");
　　　　login_close.id = "login-close";
　　　　login_close.onclick = function() {
　　　　close(mask);
　　　　close(login);
　　　　}
　　　　login.appendChild(login_close);

　　　　document.body.appendChild(login);
　　　　}

　　　　function close(x) {
　　　　document.body.removeChild(x);
　　　　}

　　　　window.onresize = function() {
　　　　var login_re = document.getElementById("login");
　　　　var height = document.documentElement.clientHeight;
　　　　var width = document.documentElement.clientWidth;

　　　　login_re.style.top = height / 2 - 100 + "px";
　　　　login_re.style.left = width / 2 - 150 + "px";
　　　　}

　　　　</script>