标签:函数 rip tran isp register child get city oct
<!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; } #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; } #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); //登录按钮的点击事件 login.addEventListener(‘click‘,showLogin); function showLogin(){ //创建遮罩层 var mask = document.createElement(‘div‘); //给遮罩层设置id mask.id = "mask"; //设置遮罩层的大小 var mh = screen.height + "px"; var mw = screen.width + "px";//需要自己加单位,通过screen.width或screen.availWidth获取到的只是数值,并不带单位 // alert(mh) mask.style.height = mh; mask.style.width = mw; //将遮罩层添加到页面中 document.body.appendChild(mask); //创建登陆框 var loginPage = document.createElement(‘div‘); loginPage.id = "loginPage"; //创建X var close = document.createElement(‘span‘); close.id = "close"; //将X添加到loginPage登陆框中 loginPage.appendChild(close); document.body.appendChild(loginPage); //X的事件 close.addEventListener(‘click‘,closeLogin); //点击遮罩层关闭登陆框 mask.addEventListener(‘click‘,closeLogin); function closeLogin(){ loginPage.style.display = "none"; mask.style.display = "none"; } } //通过函数封装通过id获取元素 function getId(id){ return document.getElementById(id); } </script> </html>
标签:函数 rip tran isp register child get city oct
原文地址:https://www.cnblogs.com/menglong1214/p/9561316.html