<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表单</title><style type="text/css"> #mask{background:#000;opacity:0.75;filter:aloha(opacity=75);width:100%;} #denglu{color:#FFF;background-color:#F00;width:3%;height:40px;font-size:17px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;right:100px;top:50px;cursor:pointer;} #ologin{width:25%;height:370px;background-color:#efefef;position:absolute;left:960px;top:350px;border-radius:5px;border:1px;display:none;z-index:10;} .2logink{margin:-5px 0 0 -5px;display:block;} #login input{width:50%;height:40px;left:10px;border-radius:3px;border:1px;position:absolute;left:40px;font-size:14px;font-family:"微软雅黑";} .submita{color:#FFF;background-color:#F00;width:50%;height:60px;border:0;font-size:20px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;left:40px;top:250px;cursor:pointer;} .submita:hover{background-color:#933;} .dengluw{color:#000;font-family:"微软雅黑";position:absolute;left:50px;top:40px;font-size:20px;} .checklogin{width:15px;height:15px;margin:5px 0 0 22px;cursor:pointer;} .lonwen{font-size:7px;font-family:"微软雅黑";position:absolute;left:63px;top:205px;} .wjimima{font-size:7px;font-family:"微软雅黑";position:absolute;right:280px;top:205px;text-decoration:underline;color:#666;cursor:pointer;} .qqita{font-size:18px;font-family:"微软雅黑";position:absolute;right:130px;top:80px;} .submitqi1{color:#FFF;background-color:#0CF;width:30%;height:30px;border:0;font-size:10px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;right:42px;top:150px;cursor:pointer;} .submitqi1:hover{background-color:#09F;} .submitqi:hover{background-color:#CCC;} .submitqi{color:#999;background-color:#FFF;width:30%;height:30px;border:0;font-size:10px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;right:42px;top:200px;cursor:pointer;} .zhuce1{font-size:10px;font-family:"微软雅黑";position:absolute;right:98px;top:280px;} .zhuce{font-size:10px;font-family:"微软雅黑";position:absolute;right:36px;top:280px;text-decoration:underline;cursor:pointer;color:#999;} #imgslog{position:absolute;right:8px;top:8px;}</style><body><form><input type="submit" value="登   录" id="denglu"></form><div id="ologin"><form id="login"> <br /><br /> <span class="dengluw">登 录</span><br><br><br /> <input type="text" class="loginput"><br /><br /><br /> <input type="password" class="logpsd" /><br><br /><br /> </form> <form class="checklogin"> <input type="checkbox" class="checklogin"></form> <span class="lonwen">记住密码</span> <span class="wjimima">忘记密码？</span> <input type="submit" value="登   录" class="submita"> <span class="qqita">其他方式登录:</span> <form> <input type="submit" value="QQ快捷登录" class="submitqi1"><br><br> <input type="submit" value="微信快捷登录" class="submitqi"> <img src="close.png" width="30" height="30" id="imgslog"> </form> <span class="zhuce1">没有账号，</span> <span class="zhuce">快速注册！</span></div><script type="text/javascript"> window.onload = function(){ var Obtn = document.getElementById('denglu'); var Ologin = document.getElementById('ologin'); //获取页面高度 var sHeight = document.body.scrollHeight; //点击登录按钮出现遮罩层和登录框 Obtn.onclick = function(){ var oMask = document.createElement("div"); oMask.id="mask"; oMask.style.height=sHeight + "px"; document.body.appendChild(oMask); Ologin.style.display='block'; var oClose=document.getElementById('imgslog'); oMask.onclick=oClose.onclick=function(){ document.body.removechild(oMask); Ologin.style.display="none"; } }}</script></body></html>
1 回答
已采纳
堂堂堂堂糖糖糖童鞋
TA贡献101条经验 获得超58个赞
<form> <input type="submit" value="登   录" id="denglu"> </form>
将type="submit" 改为type="button"，当type="submit"时，实际上是在做表单提交，相当于出现了弹出窗，又按了一下F5。本来写好了，输入F5时，我也按了一下F5，又重写了一遍。。。
添加回答
举报
0/150
提交
取消