点击按钮无刷新弹出小窗口的代码_窗口状态特效_好我要网--特色网络资源网站,hao51xx-好我要嘻嘻,好多我要滴!

点击按钮无刷新弹出小窗口的代码

发布时间：2010/1/14 阅读次数：4696 字体大小: 【小】【中】【大】

代码简述：有的网站的用户登录功能很酷？像腾讯QQ网一样，点击登录按钮或登录文字就会弹出一个登录框，而页面不刷新，登录完成后自动又回到原页面，本段代码是实现了点击后弹出一个含有登录信息的层，登录功能需要你配合动态页面完成。

<!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('/user/tool/code/images/title.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('/user/tool/code/images/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;  
}

</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://a.cdn.zhuolaoshi.cn/user/tool/code/images/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>  
</div>  
</body>  
</html>

提示：部分代码需要到这里测试才能看见完整效果！

在中搜索：“点击按钮无刷新弹出小窗口的代码”更多内容
在中搜索：“点击按钮无刷新弹出小窗口的代码”更多内容

上一篇：打开网页自动弹出另一个页面代码下一篇：各种原理的网页跳转代码汇总

我要评论