登录注册页面名非常常用，登录注册页面的代码：
<script> //弹出框中的css部分 input { font-family: Arial, sans-serif;} .login { 270px; margin: 0 auto; padding: 30px 40px; background-color: #f7f7f7;} .login ul { list-style-type: none;} .login li { padding: 10px 0; overflow: hidden;} .login .li3, .login .li5 { text-align: right; font-size: 12px;} .login .li3 input { 13px; height: 13px; margin: 0 3px 0 10px; vertical-align: middle;} .login .submit { display: block; 100%; padding: 6px 0; border: 0 none; color: #fff; background-color: #4d90fe; cursor: pointer;} #email, #password { 214px; padding: 5px; border: 1px solid #ccc;} .forgot { color: #333;} //遮罩层css部分 #mask { background: #000000; opacity: 0.75; /*IE不认这个属性*/ filter: alpha(opacity=75); /*这个是为了保证IE兼容*/ height: 800px; 100%; position: absolute; z-index: 999; left: 0; top: 0; } #login { position: fixed; /*静止定位*/ /*left: 30%; top: 30%;*/ z-index: 1000; } .loginCon { 350px; height: 270px; } //弹出框中的关闭部分 #close { 20px; height: 20px; position: absolute; right: 10px; top: 10px; cursor: pointer; /*border:1px solid red;*/ font-size:24px; font-weight:400 } </style> <body> <div id="zd"> <div class="zd1" onclick="openNew()" >登录</div> <div class="zd1" onclick="show()" >注册</div> </div> </body> <script type="text/javascript"> function openNew() { // 获取页面高度和宽度 var sHeight = document.documentElement.scrollHeight; var sWidth = document.documentElement.scrollWidth; // alert(sHeight); // alert(sWidth); // 可视区域的高度和宽度 var wHeight = document.documentElement.clientHeight; var wWidth = document.documentElement.clientWidth; // alert(sHeight); // alert(sWidth); var oMask = document.createElement("div"); oMask.id = "mask"; oMask.style.height = sHeight + "px"; oMask.style.width = sWidth + "px"; document.body.appendChild(oMask); var oLogin = document.createElement("div"); oLogin.id = "login"; oLogin.innerHTML = '<div class="loginCon"><div class="loginCon"><div class="login"><ul><li><span><label for="email">邮箱：</label></span><input id="email" type="text"></li><li><span><label for="password">密码：</label></span><input id="password" type="password"></li><li class="li3"><input type="checkbox" id="remember"><label for="remember">记住密码</label> <input type="checkbox" id="togglePassword"><label for="togglePassword">显示密码</label></li><li class="li4"><input class="submit" type="submit" value="登录"></li></ul></div></div><div id="close">×</div></div>'; document.body.appendChild(oLogin); var dHeight = oLogin.offsetHeight; var dWidth = oLogin.offsetWidth; oLogin.style.top = (wHeight - dHeight) / 2 + "px"; oLogin.style.left = (wWidth - dWidth) / 2 + "px"; var oClose = document.getElementById("close") oClose.onclick = function() { document.body.removeChild(oMask); document.body.removeChild(oLogin); } oMask.onclick = function() { document.body.removeChild(oMask); document.body.removeChild(oLogin); } } function show() { // 获取页面高度和宽度 var sHeight = document.documentElement.scrollHeight; var sWidth = document.documentElement.scrollWidth; // alert(sHeight); // alert(sWidth); // 可视区域的高度和宽度 var wHeight = document.documentElement.clientHeight; var wWidth = document.documentElement.clientWidth; // alert(sHeight); // alert(sWidth); var oMask = document.createElement("div"); oMask.id = "mask"; oMask.style.height = sHeight + "px"; oMask.style.width = sWidth + "px"; document.body.appendChild(oMask); var oLogin = document.createElement("div"); oLogin.id = "login"; oLogin.innerHTML = '<div class="loginCon"><div class="loginCon"><div class="login"><ul><li><span><label for="zhanghao">账号： </label></span><input id="zhanghao " type="text" style="height:23px"></li><li><span><label for="yonghuming">用户名：</label></span><input id="yonghuming" type="text" style="height:23px"></li> <li><span><label for="password">密码：</label></span><input id="password" type="password"></li><li><span><label for="password">确认密码：</label></span><input id="password" type="password"></li><li class="li4"><input class="submit" type="submit" value="提交"></li></ul></div></div><div id="close">×<div></div>'; document.body.appendChild(oLogin); var dHeight = oLogin.offsetHeight; var dWidth = oLogin.offsetWidth; oLogin.style.top = (wHeight - dHeight) / 2 + "px"; oLogin.style.left = (wWidth - dWidth) / 2 + "px"; document.getElementById("close").onclick = function() { document.body.removeChild(oMask); document.body.removeChild(oLogin); } document.getElementById("login").onclick = function() { document.body.removeChild(oMask); document.body.removeChild(oLogin); } } </script>