首页 > 代码库 > div弹出登录窗口
div弹出登录窗口
<meta charset="utf-8"/><script type="text/javascript">//弹出式登录 function ShowNo() //隐藏两个层 { document.getElementById("doing").style.display = "none"; document.getElementById("divLogin").style.display = "none"; } function $(id) { return (document.getElementById) ? document.getElementById(id) : document.all[id]; } function showFloat() //根据屏幕的大小显示两个层 { var range = getRange(); $(‘doing‘).style.width = range.width + "px"; $(‘doing‘).style.height = range.height + "px"; $(‘doing‘).style.display = "block"; document.getElementById("divLogin").style.display = ""; } function getRange() //得到屏幕的大小 { var top = document.body.scrollTop; var left = document.body.scrollLeft; var height = document.body.clientHeight; var width = document.body.clientWidth; if (top == 0 && left == 0 && height == 0 && width == 0) { top = document.documentElement.scrollTop; left = document.documentElement.scrollLeft; height = document.documentElement.clientHeight; width = document.documentElement.clientWidth; } return { top: top, left: left, height: height, width: width }; } //这是自己写的登录方法,如果要用的话请注意修改这一块 function Login() { var username = document.getElementById("txtUserName").value; var pwd = document.getElementById("txtPwd").value; if (username == "" || pwd == "") { alert("请输入用户名或密码"); return; } var div = document.getElementById("userinfo"); var xmlHttp = GetXmlHttpObject(); //指定回调函数 xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { m = xmlHttp.responseText; if (m == "0") { alert("用户名或密码不正确"); } else { Msg = m; div.innerHTML = "<a href=http://www.mamicode.com/‘../MusicSite/MemberCenter.aspx‘ target=‘_blank‘>" + m + "</a>"; div.setAttribute("class", "mid"); ShowNo(); } } }; //初始化xmlhttprequst xmlHttp.open("POST", "Login.aspx", true); //设置头部 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //发送数据 var data = "http://www.mamicode.com/username=" + escape(username) + "&pwd=" + escape(pwd); xmlHttp.send(data); }</script><!-- 下面是写在html中的代码 --> <!-- 这个是你的登录按钮 --> <a href="http://www.mamicode.com/#" onclick="showFloat()">登录</a><!--弹出式登录---><!--加一个半透明层--> <div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;"> </div> <!--加一个登录层--> <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:400px;z-index:1001;height:200px; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -200px;"> <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" > <div> 用户名: <input type="text" style="border:1px solid #898989;height:20px;" id="txtUserName" /> <br /> 密 码: <input type="password" style="border:1px solid #898989;height:20px;margin-left:10px;" id="txtPwd" onkeydown="if(event.keyCode==13) {Login();}" /> </div> <br/> <div style="text-align:center;"> <input type="button" id="BttLogin" value="http://www.mamicode.com/登录" onclick="Login();"/> <input type="button" id="BttCancel" value="http://www.mamicode.com/取消" onclick="ShowNo()"/> </div> </div> </div>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。