<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function divShow1() {
$("#AddUser").show();
document.getElementById("AddUser").style.display = "";
$("#divCover").show();
}
function divhide1() {
$("#AddUser").hide();
$("#divCover").hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<style>
.Addstyle{
position: absolute;
width: 30%;
text-align:left;
border: 2px solid #104E8B;
z-index:1002;
-moz-opacity: 1.0;
opacity:1.0;
display:none;
top: 30%;
left: 30%;
position: fixed;
background-color:#FF7F00;
}
.Coverstyle{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height:100%;
background-color:#FFD700;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
display:none;
position: fixed;
}
</style>
<input type="button" onclick='divShow1()' value="注册新用户" id="divShow" />
<div class="Addstyle" id="AddUser">
<p>注册新用户</p><br />
用户名:<input type="text" id="userid" /><br />
密码 :<input type="text" id="userpwd"/><br />
<input type="button" id="btnOk" value="保存" /><input type="button" id="btnCan" onclick="divhide1()" value="取消" />
</div>
<div class="Coverstyle" id="divCover"></div>
</form>
</body>
</html>
代码是在vs里面敲的,用到了JQuery,但需要注意的是 css中的
position: fixed;
这样子保证了2个div不会随页面滚动条的滚动而改变位置。