无刷新弹出可拖动登录窗口
2017-04-10 17:15
357 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无刷新弹出登录窗口</title> <style type="text/css"> div.sample_popup { z-index: +1; } div.menu_form_header{ cursor:move } div.sample_popup div.menu_form_header { border: 1px solid black; border-bottom: 0px; cursor: default; width: 200px; height: 20px; line-height: 19px; vertical-align: middle; background: url('http://codefans.net/jscss/demoimg/200904/20title.png') no-repeat; text-decoration: none; font-family: "Times New Roman", Serif; font-weight: 900; font-size: 13px; color: #206040; } div.sample_popup div.menu_form_body { border: 1px solid black; width: 200px; background: url('http://codefans.net/jscss/demoimg/200904/logbg.png') no-repeat left bottom; } div.sample_popup img.menu_form_exit { float: right; margin: 4px 5px 0px 0px; cursor: pointer; } div.sample_popup table { border-collapse: collapse; width: 100%; } div.sample_popup th { width: 1%; padding: 0px 5px 1px 0px; text-align: left; font-family: "Times New Roman", Serif; font-weight: 900; font-size: 13px; color: #004060; } div.sample_popup td { width: 99%; padding: 0px 0px 1px 0px; } div.sample_popup form { margin: 0px; padding: 8px 10px 10px 10px; } div.sample_popup input.field { border: 1px solid #808080; width: 95%; font-family: Arial, Sans-Serif; font-size: 12px; } div.sample_popup input.btn { margin-top: 2px; border: 1px solid #808080; background-color: #DDFFDD; font-family: Verdana, Sans-Serif; font-size: 11px; } a { color: #FF0000; text-decoration: none; } </style> <script language="javascript"> var popup_dragging = false; var popup_target; var popup_mouseX; var popup_mouseY; var popup_mouseposX; var popup_mouseposY; var popup_oldfunction; function popup_display(x) { var win = window.open(); for (var i in x) win.document.write(i+' = '+x[i]+'<br>'); } function popup_mousedown(e) { var ie = navigator.appName == "Microsoft Internet Explorer"; 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; else popup_oldfunction = document.onmousedown; if (ie) document.onselectstart = new Function("return false;"); else document.onmousedown = new Function("return false;"); } function popup_mousemove(e) { if (!popup_dragging) return; var ie = navigator.appName == "Microsoft Internet Explorer"; var element = document.getElementById(popup_target); var mouseX = ie ? window.event.clientX : e.clientX; var mouseY = 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; } function popup_mouseup(e) { if (!popup_dragging) return; popup_dragging = false; var ie = navigator.appName == "Microsoft Internet Explorer"; var element = document.getElementById(popup_target); if (ie) document.onselectstart = popup_oldfunction; else document.onmousedown = popup_oldfunction; } function popup_exit(e) { var ie = navigator.appName == "Microsoft Internet Explorer"; var element = document.getElementById(popup_target); popup_mouseup(e); element.style.visibility = 'hidden'; element.style.display = 'none'; } function popup_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; } function popup_mousepos(e) { var ie = navigator.appName == "Microsoft Internet Explorer"; popup_mouseposX = ie ? window.event.clientX : e.clientX; popup_mouseposY = ie ? window.event.clientY : e.clientY; } if (navigator.appName == "Microsoft Internet Explorer") document.attachEvent('onmousedown', popup_mousepos); else document.addEventListener('mousedown', popup_mousepos, false); if (navigator.appName == "Microsoft Internet Explorer") document.attachEvent('onmousemove', popup_mousemove); else document.addEventListener('mousemove', popup_mousemove, false); if (navigator.appName == "Microsoft Internet Explorer") document.attachEvent('onmouseup', popup_mouseup); else document.addEventListener('mouseup', popup_mouseup, false); </script> </head> <body> <input type="button" onclick="popup_show()" value='登录'/> <div class="sample_popup" id="popup" style="visibility: hidden; display: none;"> <div class="menu_form_header" id="popup_drag"> <img class="menu_form_exit" id="popup_exit" src="http://codefans.net/jscss/demoimg/200904/closes.png" /> 您好,请登录: </div> <div class="menu_form_body"> <form method="post" action=""> <table> <tr> <th>Username:</th> <td><input class="field" type="text" onfocus="select();" /></td> </tr> <tr> <th>Password:</th> <td><input class="field" type="password" onfocus="select();" /></td> </tr> <tr> <th> </th> <td><input class="btn" type="submit" value="Submit" /></td> </tr> </table> </form> </div> </div> </body> </html>
相关文章推荐
- 无刷新弹出登录窗口理论
- 无刷新弹出登录窗口
- 怎样将弹出的模式窗口关闭并刷新父窗体?
- jQuery实现弹出窗口中切换登录与注册表单
- JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小~!
- 介绍怎样解决JavaScript页面刷新与弹出窗口的问题。
- 弹出窗口刷新它的父页面后。出现不重新发送信息,则无法刷新网页
- 点击按钮弹出新窗口,输入数据后返回并刷新页面
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(老孟)
- [转]弹出窗口刷新它的父页面后。出现不重新发送信息,则无法刷新网页
- Asp.net实现弹出窗口提示,又防止刷新被重复提交的方法
- C# 安装时弹出设置服务登录窗口
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- firefox弹出窗口关闭时执行代码--刷新父窗口
- 利用js实现遮罩以及弹出可移动登录窗口
- 弹出子窗口并刷新父窗口(子窗口中打开子窗口)
- jQueryRegLogin弹出可拖动的登录和注册
- 模式窗口刷新不弹出新窗口触发NET事件
- DIV模拟弹出窗口(支持拖动)
- 页面弹出模态窗口showModelDialog,关闭窗口刷新父页面