为了账号安全,请及时绑定邮箱和手机立即绑定

为什么点击登录按钮之后遮罩层和登录框闪一下就没有了呢?

<!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="登&nbsp&nbsp&nbsp录" id="denglu">

</form>

<div id="ologin">

<form id="login">

<br /><br />

<span class="dengluw">登&nbsp录</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="登&nbsp&nbsp&nbsp录" 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>


正在回答

举报

0/150
提交
取消
弹出层效果
  • 参与学习       39051    人
  • 解答问题       162    个

通过本课程的学习让您能灵活运用知识,制作出超炫的弹出层效果

进入课程

为什么点击登录按钮之后遮罩层和登录框闪一下就没有了呢?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号