今天在做小组项目的时候发现登录和注册的使用不是很熟，记录下来：
<script>
//弹出框中的css部分
input { font-family: Arial, sans-serif;}
.login { width: 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 { width: 13px; height: 13px; margin: 0 3px 0 10px; vertical-align: middle;}
.login .submit { display: block; width: 100%; padding: 6px 0; border: 0 none; color: #fff; background-color: #4d90fe; cursor: pointer;}
#email, #password { width: 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;
width: 100%;
position: absolute;
z-index: 999;
left: 0;
top: 0;
}
#login {
position: fixed;
/*静止定位*/
/*left: 30%;
top: 30%;*/
z-index: 1000;
}
.loginCon {
width:350px;
height: 270px;
}
//弹出框中的关闭部分 #close {
width: 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>
时间： 2024-10-14 09:16:24