JavaScript 弹出登陆窗口背景半透明可拖动效果
来源：互联网 发布：windows 7主题 编辑：程序博客网 时间：2024/05/30 04:21
<html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <meta name="author" content="www.newxing.com" /> <meta name="author email" content="123@linhaibo.com" /> <title>弹出窗口登录效果</title><style>body,p { 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: 0.9;}#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: 9pt; 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; filter: progid: DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75) filter: alpha(opacity=70); opacity: 0.7;}</style> </head> <body> <div id="bgDiv" style="display:none;"> </div> <a href="javascript:" onClick="bgDiv.style.display='';login.style.display='';">登录</a> <br><br><a href="http://www.newxing.com">新兴网络</a> <div style="position:absolute; left:378px; top:150px; z-index:1; display: none;" id="login"> <div id="loginBox"> <p class="title" id="Mdown"><span class="t1">登录</span><span class="t2" title="关闭" onClick="login.style.display='none';bgDiv.style.display='none'">X</span></p> <div class="login"><form method="post" action="post.asp">用户名:<input type="text"name="UserName" size="12" maxlength="10"><div class="login">密 码:<input type="text"name="Password" size="12" maxlength="10"></div><input class="submit" type="submit" value="登录"></form></div> </div> </div><script type="text/javascript"> var IsMousedown, LEFT, TOP, S; document.getElementById("Mdown").onmousedown=function(e) { S = document.getElementById("login"); IsMousedown = true; e = e||event; LEFT = e.clientX - parseInt(S.style.left); TOP = e.clientY - parseInt(S.style.top); document.body.onmousemove = function(e) { e = e||event; if (IsMousedown) { S.style.left = e.clientX - LEFT + "px"; S.style.top = e.clientY - TOP + "px"; } } document.onmouseup=function(){IsMousedown=false;} }</SCRIPT></body></html>
