弹出div样例 - 爱码网

<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 >
<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="注册新用户"   />
       <div class="Addstyle" >
             <p>注册新用户</p><br />
             用户名：<input type="text"  /><br />
             密码  ：<input type="text" /><br />
             <input type="button"  />
       </div>
       <div class="Coverstyle" ></div>
    </form>
</body>
</html>

代码是在vs里面敲的，用到了JQuery，但需要注意的是 css中的 
position: fixed;
这样子保证了2个div不会随页面滚动条的滚动而改变位置。