弹出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 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不会随页面滚动条的滚动而改变位置。
posted @ 2012-05-30 19:14  Tsong Chen  阅读(368)  评论(0编辑  收藏  举报