- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="www.w3.org/1999/xhtml">
- <head>
- <title>漂亮的点击弹出的登陆框</title>
- <metahttp-equiv="content-Type"content="text/html;charset=gb2312">
- <!--把下面代码加到<head>与</head>之间-->
- <styletype="text/css">
- .login{z-index:+1;}
- body{font-size:12px;font-family:Arial,Helvetica,sans-serif;}
- .login.inputb{width:97px;height:15px;border:1pxsolid#baced6;font-size:12px;padding-top:2px;margin-right:6px;display:block;float:left;}
- .login_header{
- cursor:move
- }
- .logindiv.login_header
- {
- border:black;
- border-bottom:0px;
- cursor:default;
- width:254px;
- height:31px;
- line-height:19px;
- vertical-align:middle;
- background:url('images/headbg.gif')no-repeat;
- text-decoration:none;
- }
- .logindiv.login_body
- {
- border:black;
- width:254px;
- background:url('images/bg.gif')no-repeatleftbottom;
- margin:0;
- }
- .loginimg.login_exit
- {
- float:right;
- margin:6px8px0px0px;
- cursor:pointer;
- }
- .logintable
- {
- border-collapse:collapse;
- margin-bottom:5px;
- }
- .logintableth,.logintabletd{padding:3px0;}
- .logintableth{width:68px;text-align:right;font-weight:normal;color:#4e6aab;}
- .login.code{}
- .login.codeimg{border:1pxsolid#adc6dd;margin-bottom:-5px;}
- .login.lsubmit{padding-left:60px;}
- .logintabletd.linka{display:block;float:left;padding-top:4px;}
- </style>
- <scriptlanguage="javascript">
- varpopup_dragging=false;
- varpopup_target;
- varpopup_mouseX;
- varpopup_mouseY;
- varpopup_mouseposX;
- varpopup_mouseposY;
- varpopup_oldfunction;
- functionpopup_display(x)
- {
- varwin=window.open();
- for(variinx)win.document.write(i+'='+x[i]+'<br>');
- }
- //-----popup_mousedown-------------------------------------------------------
- functionpopup_mousedown(e)
- {
- varie=navigator.appName=="MicrosoftInternetExplorer";
- if(ie&&window.event.button!=1)return;
- if(!ie&&e.button!=0)return;
- popup_dragging=true;
- popup_target=this['target'];
- popup_mouseX=ie?window.event.clientX:e.clientX;
- popup_mouseY=ie?window.event.clientY:e.clientY;
- if(ie)
- popup_oldfunction=document.onselectstart;
- elsepopup_oldfunction=document.onmousedown;
- if(ie)
- document.onselectstart=newFunction("returnfalse;");
- elsedocument.onmousedown=newFunction("returnfalse;");
- }
- //-----popup_mousemove-------------------------------------------------------
- functionpopup_mousemove(e)
- {
- if(!popup_dragging)return;
- varie=navigator.appName=="MicrosoftInternetExplorer";
- varelement=document.getElementById(popup_target);
- varmouseX=ie?window.event.clientX:e.clientX;
- varmouseY=ie?window.event.clientY:e.clientY;
- element.style.left=(element.offsetLeft+mouseX-popup_mouseX)+'px';
- element.style.top=(element.offsetTop+mouseY-popup_mouseY)+'px';
- popup_mouseX=ie?window.event.clientX:e.clientX;
- popup_mouseY=ie?window.event.clientY:e.clientY;
- }
- //-----popup_mouseup---------------------------------------------------------
- functionpopup_mouseup(e)
- {
- if(!popup_dragging)return;
- popup_dragging=false;
- varie=navigator.appName=="MicrosoftInternetExplorer";
- varelement=document.getElementById(popup_target);
- if(ie)
- document.onselectstart=popup_oldfunction;
- elsedocument.onmousedown=popup_oldfunction;
- }
- //-----popup_exit------------------------------------------------------------
- functionpopup_exit(e)
- {
- varie=navigator.appName=="MicrosoftInternetExplorer";
- varelement=document.getElementById(popup_target);
- popup_mouseup(e);
- element.style.visibility='hidden';
- element.style.display='none';
- }
- //-----popup_show------------------------------------------------------------
- functionpopup_show()
- {
- element=document.getElementById('popup');
- drag_element=document.getElementById('popup_drag');
- exit_element=document.getElementById('popup_exit');
- element.style.position="absolute";
- element.style.visibility="visible";
- element.style.display="block";
- element.style.left=(document.documentElement.scrollLeft+popup_mouseposX-10)+'px';
- element.style.top=(document.documentElement.scrollTop+popup_mouseposY-10)+'px';
- drag_element['target']='popup';
- drag_element.onmousedown=popup_mousedown;
- exit_element.onclick=popup_exit;
- }
- //-----popup_mousepos--------------------------------------------------------
- functionpopup_mousepos(e)
- {
- varie=navigator.appName=="MicrosoftInternetExplorer";
- popup_mouseposX=ie?window.event.clientX:e.clientX;
- popup_mouseposY=ie?window.event.clientY:e.clientY;
- }
- //-----AttachEvents---------------------------------------------------------
- if(navigator.appName=="MicrosoftInternetExplorer")
- document.attachEvent('onmousedown',popup_mousepos);
- elsedocument.addEventListener('mousedown',popup_mousepos,false);
- if(navigator.appName=="MicrosoftInternetExplorer")
- document.attachEvent('onmousemove',popup_mousemove);
- elsedocument.addEventListener('mousemove',popup_mousemove,false);
- if(navigator.appName=="MicrosoftInternetExplorer")
- document.attachEvent('onmouseup',popup_mouseup);
- elsedocument.addEventListener('mouseup',popup_mouseup,false);
- </script>
- </head>
- <body>
- <!--把下面代码加到<body>与</body>之间-->
- <ahref="#"onclick="popup_show()">登陆</a>
- <divclass="login"id="popup"style="visibility:hidden;display:none;">
- <divclass="login_header"id="popup_drag">
- <imgclass="login_exit"id="popup_exit"src="images/close.gif"alt="关闭"/>
- </div>
- <divclass="login_body">
- <formid="member_login"name="member_login"action=""method="post">
- <table>
- <tr>
- <th>用户名:</th>
- <td><inputtype="text"class="inputb"/><spanclass="linka"><ahref="#">快速注册</a></span></td>
- </tr>
- <tr>
- <th>密码:</th>
- <td><inputtype="text"class="inputb"/><spanclass="linka"><ahref="#">忘记密码</a></span></td>
- </tr>
- <tr>
- <th>验证码:</th>
- <td><inputtype="text"class="inputb"/><spanclass="code"><imgsrc="images/code.gif"/></span></td>
- </tr>
- <tr>
- <th>Cookie:</th>
- <td><selectname="select"id="select">
- <optionvalue="1">保持一年</option>
- </select></td>
- </tr>
- <tr>
- <tdcolspan="2"class="lsubmit"><inputtype="submit"value="登录"/><inputtype="submit"value="重置"/></td>
- </tr>
- </table>
- </form>
- </div>
- </div>
- </div>
- </body>
- </html>
漂亮的点击弹出的登陆框
最新推荐文章于 2023-01-05 15:57:38 发布