遮罩层实现方式一
Posted menglong1214
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了遮罩层实现方式一相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #login-register span{ display: inline-block; padding: 6px 10px; background: #E3E3E3; cursor: pointer; } #mask{ height: 2000px; width: 100%; background: #666; position: fixed; top: 0; left: 0; opacity: 0.6; z-index: 100; display: none; } #loginPage{ width: 430px; height: 295px; background: url(img/TencentLogin.png) no-repeat; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1000; display: none; } #close{ float: right; height: 30px; width: 30px; margin: 10px 10px 0 0; background: url(img/close.png) no-repeat; cursor: pointer; } </style> </head> <body> <div id="login-register"> <span id="login">登录</span> <span id="register">注册</span> </div> <!--遮罩层--> <div id="mask"> </div> <!--登录页面--> <div id="loginPage"> <span id="close"></span> </div> </body> <script type="text/javascript"> var login = getId("login"); // var register = getId(register); var mask = getId(‘mask‘); var loginPage = getId(‘loginPage‘); var close = getId(‘close‘); // console.log(login) //登录按钮的点击事件 login.addEventListener(‘click‘,showLogin); function showLogin(){ mask.style.display = "block" loginPage.style.display = "block" } //X的事件 close.addEventListener(‘click‘,closeLogin); function closeLogin(){ mask.style.display = "none" loginPage.style.display = "none" } //点击遮罩层关闭登陆框 mask.addEventListener(‘click‘,closeLogin); //通过函数封装通过id获取元素 function getId(id){ return document.getElementById(id); } </script> </html>
以上是关于遮罩层实现方式一的主要内容,如果未能解决你的问题,请参考以下文章