一个JS弹出层用户登录效果
浏览数：21 /
时间：2015年06月09日
<html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>接触角测定仪 http://www.dgshengding.com</title> <style> body,#Mdown{margin: 0;padding: 0;text-align: center;font: normal 14px/180% Tahoma,sans-serif;} #loginBox{margin: 0 auto;padding: 0px;text-align: left;width: 280px;height: 150px;background: #EAEEFF;font-size: 9pt;border: 1px solid #829AFF;overflow: hidden;filter: alpha(opacity=90);opacity: 1;} #loginBox .title{text-align: left;padding-left: 10px;font-size: 11pt;border-bottom: 1px solid #829AFF;height: 25px;line-height: 25px;cursor: move;} #loginBox .t1{float: left;font-weight: bold;color: #AA7B7B;text-decoration: none;} #loginBox .t2{float: right;text-align: center;line-height: 18px;height: 18px;width: 18px;margin-top: 3px;margin-right: 2px;overflow: hidden;border: 1px solid #FF5889;background: #FFE0E9;cursor: pointer;} #loginBox .login{text-align: center;width: 100%;height: 100%;} input.submit{float: right;border: 1px solid #829AFF;FONT-SIZE: 9px;background: #EAEEFF;HEIGHT: 20px;margin-top: 5px;margin-right: 70px;} #bgDiv{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;right: 0px;background-color: #777;opacity: 0.7;} </style> </head> <body> <div id="bgDiv" style="display:none;"></div> <a href="javascript:" onClick="bgDiv.style.display=‘‘;loginBox.style.display=‘‘;">登录</a> <div id="loginBox" style="position:absolute; left:367px; top:150px; z-index:1;display: none;" > <div class="title" id="Mdown"><span class="t1">登录</span><span class="t2" title="关闭" onClick="login.style.display=‘none‘;bgDiv.style.display=‘none‘">X</span></div> <div class="login"> <form method="post" action="#"> <table> <tr> <td>用户名:</td><td><input type="text"name="username" size="12" maxlength="10"></td> </tr> <tr> <td>密 码:</td><td><input type="text"name="password" size="12" maxlength="10"></td> </tr> <tr> <td></td><td><button class="submit" type="submit">登陆</button></td> </tr> </table> </form> </div> </div> <script type="text/javascript"> var IsMousedown, LEFT, TOP, login; document.getElementById("Mdown").onmousedown=function(e) { login = document.getElementById("loginBox"); IsMousedown = true; e = e||event; LEFT = e.clientX - parseInt(login.style.left); TOP = e.clientY - parseInt(login.style.top); document.onmousemove = function(e) { e = e||event; if (IsMousedown) { login.style.left = e.clientX - LEFT + "px"; login.style.top = e.clientY - TOP + "px"; } } document.onmouseup=function(){ IsMousedown=false; } } </SCRIPT> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
