<!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=utf-8" />
<title>测试</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
body{margin:0px;padding:0px;font-size:12px;}
ul,li{padding:0px;margin:0px; list-style:none;}
a:link{font-size:12px;color:#000; text-decoration:none;}
a:hover{font-size:12px;color:#000;text-decoration:underline;}
a:visited{font-size:12px;color:#000;text-decoration:none;}
a:active{font-size:12px;color:#000;text-decoration:none;}
.top{height:60px;width:960px; background-color:#FED1F7;font-size:36px;padding-top:20px;}
.banner{height:22px;padding-top:8px; background-color:#FDE3D2;width:950px;padding-left:10px;text-align:left;}
.bodydiv{width:940px;padding:10px;}
.articleList{width:920px; border:1px #F93 dashed;padding:10px;}
.articleList li{width:930px; text-align:left;line-height:25px;border-bottom:1px #FDD0F0 dashed;}
.articleList li span{padding-right:20px;float:right;}
#viewbg
{
background-color:#666666;
position:absolute;
z-index:99;
left:0;
top:0;
display:none;
width:100%;
height:1000px;
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
#login_container
{
position:absolute;
width:425px;
left:50%;
top:50%;
margin-left:-200px;
height:auto;
z-index:100;
background:#FFF;
border:1px #FAABC7 dashed;
padding:2px;
display: none;
padding-top:-1000px;
}
#login_container h2
{
height:22px;
font-size:14px;
background-color:#FFC;
position:relative;
padding-left:10px;
line-height:30px;
padding-top:8px;
margin-top:-1px!important;
margin-top:0px;
}
#login_container h2 a
{
position:absolute;
right:5px;
font-size:12px;
color:#F00;
}
.loginbox{padding:10px;}
</style>
</head>
<body>
<center>
<div class="top">
文章测试
</div>
<div class="banner">
<a href="#">文章列表</a>
</div>
<div class="bodydiv">
<div class="articleList">
<input type="button" name="show" class="show" value="登录"/>
</div>
</div>
<div id="viewbg"></div>
<div id="login_container">
<h2><a href="#" class="close">关闭</a></h2>
<div class="loginbox">
<table border="0" width="300px">
<tr><td width="30%" align="right">用户名：</td><td width="70%" align="left"><input type="text" name="username"/></td></tr>
<tr><td width="30%" align="right">密码：</td><td width="70%" align="left"><input type="password" name="userpwd"/></td></tr>
<tr><td colspan="2"><input type="submit" name="userpwd" value="登录"/></td></tr>
</table>
</div>
</div>
</center>
<script language="javascript" type="text/javascript">
$(function(){
$(".show").click(function(){
$("#viewbg").css({display:"block",height:$(document).height()});
var yscroll = document.documentElement.scrollTop;
$("#login_container").css("top","150px");
$("#login_container").css("display","block");
document.documentElement.scrollTop = 0;
});
$(".close").click(function(){
$("#viewbg").css("display","none");
$("#login_container").css("display","none");
});
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
前往页