点击按钮无刷新弹出登录窗口的Js

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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('//ku.shouce.ren/files/images/201601/56a31c020f0fb.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('//ku.shouce.ren/files/images/201601/56a31c02bd93c.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="//ku.shouce.ren/files/images/201601/56a31c032ff8f.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

点击按钮无刷新弹出登录窗口的Js

分类

表格图层

描述

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