 |
热门文章 |
|
|
|
|
| 可显隐的用户登陆表单 |
| 来源：中国站长天空 更新时间：2009/12/3 1:34:21 阅读次数： 我要投稿 |
|
<html>
<head>
<title>可显隐的用户登陆表单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style>
#clarityDiv {
width:100%;
height:100%;
background:#000;
position:absolute;
z-index:10;
right:16px;
z-index:99;
-moz-opacity:0.4;
opacity:0.4;
filter:alpha(opacity=30);
}
#window {
border:solid 1px #dedcd8;
padding:1px;
background:#fff;
position:absolute;
z-index:100;
font-size:12px
}
#window #window_title {
height:28px;
line-height:28px;
padding:0 0 0 8px;
font-weight:bold;
color:#666
}
#window #window_title span {
cursor:pointer
}
#window #window_title .close {
float:right;
width:30px;
height:18px;
margin:0 30px 0 0
}
#window #window_content {
padding:10px 10px 10px 10px
}
#window #window_content .login {
width:220px;
margin:0 auto
}
#window #window_content .login input.text {
border:solid 1px #bab5a9;
width:150px;
height:19px;
padding:3px 0 0 5px;
}
#window #window_content .login input.text:hover {
border:solid 1px #99cc00;
}
#window #window_content .login input.btn {
border:solid 1px #bab5a9;
height:26px;
line-height:22px
}
#window #window_content .login input.btn:hover {
border:solid 1px #99cc00;
}
#window #window_content .login div {
margin:0 0 9px 0;
*margin:0 0 6px 0;
}
#window #window_content .login #hint {
color:#aaa;
padding:0 0 0 40px
}
#window #window_content .login span {
float:left;
display:block;
height:24px;
line-height:24px;
margin:1px 10px 0 0;
width:30px
}
html,body {
height:100%;
width:100%;
overflow:hidden;
margin:0
}
.corporeity {
position:relative;
width:100%;
height:100%;
overflow-x:auto;
overflow-y:scroll;
background:#f1efec;
cursor:default
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script>
function setLogin(){
var container=document.getElementById("container");
container.innerHTML='<div id="clarityDiv"></div><div id="window" style="width:300px"><div id="window_title"><span class="close" onclick="closewindow()">关闭</span><div id="window_h">用户登录</div></div><div id="window_content"><div class="login"><form class="login" id="login" method="post"><div id="hint">请输入帐号密码！</div><div><span>帐号</span><input type="text" name="user" id="user" class="text"></div><div><span>密码</span><input type="password"id="password" name="password" class="text"></div><div><span></span><input type="button" value="登 录" class="btn"> <input type="button" value="注 册" class="btn"></div></form></div></div></div>'
var divId=document.getElementById("window");
document.getElementById('container').style.display="block";
divId.style.left=(document.body.clientWidth-divId.clientWidth)/2+document.body.scrollLeft+"px";
divId.style.top=(document.body.clientHeight-divId.clientHeight)/2+document.body.scrollTop+"px";
return false;
}
</script>
</head>
<body>
<div id="container"></div>
<div class="corporeity"><a href="#" onclick="setLogin()">点击这里登陆</a></div>
<script>
function closewindow(){
document.getElementById('container').style.display="none";
}
</script>
</body>
</html> |
|
| 上一篇文章： 自动适应内容高度的多行文本框下一篇文章： 给文本框添加灰色提示文字 |
|
|
|
注册 登录
