 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 漂亮的点击弹出的登陆框 |
| 来源：中国站长天空 更新时间：2009/12/3 1:14:01 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>漂亮的点击弹出的登陆框</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.login { z-index: +1; }
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif;}
.login .inputb { width:97px; height:15px; border:1px solid #baced6; font-size:12px; padding-top:2px; margin-right:6px; display:block; float:left;}
.login_header{
cursor:move
}
.login div.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;
}
.login div.login_body
{
border: black;
width: 254px;
background: url('images/bg.gif') no-repeat left bottom;
margin:0;
}
.login img.login_exit
{
float: right;
margin: 6px 8px 0px 0px;
cursor: pointer;
}
.login table
{
border-collapse: collapse;
margin-bottom:5px;
}
.login table th , .login table td { padding:3px 0;}
.login table th { width:68px; text-align:right; font-weight:normal; color:#4e6aab; }
.login .code {}
.login .code img { border:1px solid #adc6dd; margin-bottom:-5px;}
.login .lsubmit { padding-left:60px;}
.login table td .linka { display:block; float:left; padding-top:4px; }
</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>');
}
// ----- popup_mousedown -------------------------------------------------------
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;");
}
// ----- popup_mousemove -------------------------------------------------------
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;
}
// ----- popup_mouseup ---------------------------------------------------------
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;
}
// ----- popup_exit ------------------------------------------------------------
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';
}
// ----- popup_show ------------------------------------------------------------
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;
}
// ----- popup_mousepos --------------------------------------------------------
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;
}
// ----- Attach Events ---------------------------------------------------------
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>
<!--把下面代码加到<body>与</body>之间-->
<a href="#" onclick="popup_show()">登陆</a>
<div class="login" id="popup" style="visibility: hidden; display: none;">
<div class="login_header" id="popup_drag">
<img class="login_exit" id="popup_exit" src="images/close.gif" alt="关闭" />
</div>
<div class="login_body">
<form id="member_login" name="member_login" action="" method="post">
<table>
<tr>
<th>用户名：</th>
<td><input type="text" class="inputb" /> <span class="linka"><a href="#">快速注册</a></span></td>
</tr>
<tr>
<th>密 码：</th>
<td><input type="text" class="inputb" /> <span class="linka"><a href="#">忘记密码</a></span></td>
</tr>
<tr>
<th>验证码：</th>
<td><input type="text" class="inputb" /> <span class="code"><img src="images/code.gif" /></span></td>
</tr>
<tr>
<th>Cookie：</th>
<td><select name="select" id="select">
<option value="1">保持一年</option>
</select></td>
</tr>
<tr>
<td colspan="2" class="lsubmit"><input type="submit" value="登 录" /> <input type="submit" value="重 置" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html> |
|
| 上一篇文章： 下拉列表select中的链接下一篇文章： 指定默认值的实用搜索框 |
|
|
|
注册 登录
