无刷新弹出可拖动登录窗口

gundumw100

浏览: 5819211 次
性别:
来自: 上海

最近访客更多访客>>

李大喵和李小喵

hjg8858

henseycai

beishen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript+css+html

IE Microsoft .net XHTML

<!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>

分享到：

socket基本连接 | Chinaz菜单

2009-07-30 23:55
浏览 2529
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

无刷新弹出可拖动登录窗口

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

无刷新弹出可拖动登录窗口

评论

发表评论

相关推荐

插入google地图

网页插入PDF

弹出层（Div）屏蔽父窗口并且让父窗口变暗

高效判断星期几的 javascript代码

Meta 标签使用详解

去掉图片超级链接上的虚线框

Javascript与CSS在IE和Firefox中的误区及区别

html table 标题 不滚动

100个很有用的JavaScript函数

几个不常用但很有用的javascript方法

CSS中的一些小技巧

如何让一个iframe 背景透明？

判断文本框还剩多少字符可以输入

关键字高亮显示

在javascript中获取中英文字符长度的问题

验证用户名是否符合长度要求

在你的网页中插入天气预报

JSTL之<c:forEach>

<logic:iterate>同for循环的用法比较

关闭时才执行的javasciprt

最近访客更多访客>>

html table 标题不滚动