用asp.net做一个这种效果的注册页面，高分求救！（100）

应该是悬浮了一个div
点击注册的时候显示这个div
再也没啥了程序就更简单了

首先隐藏一个div 这个div就是你要填写注册的一些信息，当鼠标在你需要相应的区域增加Onclick事件将div显示出来，提交的时候再做跳转。至于代码现在没空写呵呵上班呢

//前台
  <div id="dw_login" style="display:none">
//登陆前台代码
</div><a href="javascript:BOX_show('dw_login', 'BOX_overlay3')" target="_self" >[我要打分]</a>   //点击弹出 div//JS 代码
function BOX_show(e, f)//显示
{
    if(document.getElementById(e)==null)
    {
        return ;
    }    BOX_layout(e, f);
    window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置
    window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置
document.onkeyup = function(event)
{
var evt = window.event || event;
var code = evt.keyCode?evt.keyCode : evt.which;
//alert(code);

if(code == 27)
{
BOX_remove(e, f);
}
}

}function BOX_remove(e, f)//移除
{
    window.onscroll = null;
    window.onresize = null;
    document.getElementById(f).style.display="none";
    document.getElementById(e).style.display="none";

    var selects = document.getElementsByTagName('select');
    for(i = 0; i < selects.length; i++)
    {
        selects[i].style.visibility = "visible";
    }
}function BOX_layout(e, f)//调整位置
{
    var a = document.getElementById(e);    if (document.getElementById(f)==null)//判断是否新建遮掩层
    {

        var overlay = document.createElement("div");
        overlay.setAttribute('id', f); document.body.appendChild(overlay);
    }

document.getElementById(f).ondblclick=function(){BOX_remove(e);};
    //取客户端左上坐标，宽，高
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    var clientWidth;
    if (window.innerWidth)
    {
        clientWidth = window.innerWidth;
    }
    else
    {
        clientWidth = document.documentElement.clientWidth;
    }

    var clientHeight;
    if (window.innerHeight)
    {
        clientHeight = window.innerHeight;
    }
    else
    {
        clientHeight = document.documentElement.clientHeight;
    }

    var bo = document.getElementById(f);
    bo.style.left = scrollLeft+'px';
    bo.style.top = scrollTop+'px';
    bo.style.width = clientWidth+'px';
    bo.style.height = clientHeight+'px';
    bo.style.display="";
    //Popup窗口定位
    a.style.position = 'absolute';
    a.style.zIndex=999;
    a.style.display="";
    a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
    a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
}function HiddenButton(e)
{
    e.style.visibility='hidden';
    e.previousSibling.style.visibility='visible'
}

推荐你一个不错的jQuery不错的插件，开源的：jQueryui,在里面找dailog的例子，也是弹出层的效果，只要改变弹出层的背景样式就可以实现那样的效果了

<!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>天策-2010年最火爆5000万用户网页游戏-注册即送百元新手大礼包！</title>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="register.js"></script><style type="text/css">*{margin:0px; padding:0px;}
body {background: #000; font:normal 12px/165% "宋体"; margin:0px; padding:0px; color:#fff;  }
img {border:0; }
ul, li {margin:0px; padding:0px; list-style:none; }
a:link, a:visited{color:#181818; text-decoration:none; }
a:hover, a:active{color:#E14F00; text-decoration:underline; }
.warpper{margin:0px auto; width:1000px; overflow:hidden; position:relative; display:block; z-index:0; background:url(images/) no-repeat left top}
.input01{width:136px;border:1px solid #000;margin:0;height:15px;font-size:12px;padding:0 2px; background:#fff; color:#955633;}
.input02{margin:0;height:15px;font-size:12px;width:70px;padding:0 2px;border:1px solid #000;background:#fff; color:#955633;}
.table01 th{color:#000;text-align:right;}
.table01 td{color:#000;padding-left:4px;}
.boxError { color: red; }
.tab {
position:absolute;
width: 420px;
height: 30px;
left: 62px;
top: 19px;
z-index:1000;
}
.tab ul {list-style:none; margin:0;}
.tab ul li{float:left;list-style:none;margin:0px; }
#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}#kl_topbg{ position:relative; top:0; left:0;width:100%;height:40px;background:url(images/kl_top.jpg) repeat-x; z-index:9990}
.k1_con{background:url(images/k1_con.jpg) no-repeat; width:924px; height:40px; margin:0 auto;}
.k1_con ul{padding-left:180px;padding-top:10px;}
.k1_con ul li{float:left;}
* html img,
* html .png{
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)    );
}</style>
<script language="javascript" charset="utf-8">
function show(){
document.getElementById('show').style.display = '';
document.getElementById('bg').style.display = 'block';
}
//添加收藏代码
function addfavorite(){
    var nome_sito = document.getElementsByTagName("title")[0].innerHTML;
    var url_sito = location.href;
    if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4))
     window.external.AddFavorite(url_sito, nome_sito);
    else if (navigator.appName == "Netscape")
     window.sidebar.addPanel(nome_sito, url_sito, '');
    else
     alert("Sorry!Cann't Add this site to your favorite!.");
}function addBook(title,url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
return true;
}
}
</script>
</head>
<body>
<div id="kl_topbg"> <div class="k1_con">
      <a href="http://www1.9wee.com/activity/interface/redirect.php?id=1" target="_blank" style="width:130px; height:33px; display:block; float:left;"></a>
<ul>

       <li><a href="http://www1.9wee.com/activity/interface/redirect.php?id=103" target="_blank"><img src="images/m1.jpg" width="68" height="21" /></a></li>
          <li><a href="http://www1.9wee.com/activity/interface/redirect.php?id=102" target="_blank"><img  src="images/m2.jpg" width="78" height="21"/></a></li>
            <li><a href="http://www1.9wee.com/activity/interface/redirect.php?id=104" target="_blank"><img src="images/m3.jpg" width="109" height="21" /></a></li>
            <li><a href="http://www1.9wee.com/activity/interface/redirect.php?id=101" target="_blank"><img src="images/m4.jpg" width="90" height="21" /></a></li>
        <li><a href="http://www1.9wee.com/activity/interface/redirect.php?id=9" target="_blank"><img src="images/m5.jpg" width="58" height="21" /></a></li>
        </ul>
     <a href="http://www1.9wee.com/activity/interface/redirect.php?id=1" target="_blank"><img src="images/btn1.jpg" width="58" height="22" /></a>
       <a href=javascript:addBook('九维网','http://www.9wee.com/')> <img src="images/btn3.jpg" width="58" height="22" /></a>
            </div>
</div>
<div class="warpper">
<div>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1000" height="550">
        <param name="movie" value="tc_100209.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="tc_100209.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1000" height="550" wmode="transparent" ></embed>
        </object>
    </div>
<div style="margin: 0pt auto; text-align: center; width:1000px; height: 140px;"><img src="images/091231_footer.jpg"/></div>
    <div style="position:absolute; left:320px; top:130px; z-index:100; height: 400px; display:none;" id="show">
          <div style="position:absolute; left: 50px; top:62px; width:386px;">
<div id="show_new">
  <form method="post" id="formRegister" name="formRegister" action="https://passport.9wee.com/register?q=99153801_107_Gwebgame019&no_message=1&from=http://tc.9wee.com/v10/login/login.html?q=99153801_107_Gwebgame019" onsubmit="return clsChk.checkForm()" >
  <p style="margin-left:20px;"><img src="images/tc_100209_banner.jpg"/></p>
<table cellpadding="0" cellspacing="0" border="0" width="422" class="table01">
<tr>
                  <th width="80" height="15">通行证:</th>
                  <td colspan="3"><input name="username" type="text" onfocus="clsChk.showTip('Username')" onblur="clsChk.checkUsername()" class="input01"/></td>
                </tr>
                <tr>
                  <th width="80" height="20"></th>
                  <td colspan="2"><span id="tipUsername"></span></td>
                </tr>
                <tr>
                  <th height="24">昵称:</th>
                  <td colspan="3"><input name="nickname" type="text" onfocus="clsChk.showTip('Nickname')" onblur="clsChk.checkNickname()" class="input01" /></td>
                </tr>
                <tr>
                  <th width="80" height="20"></th>
                  <td colspan="3"><span id="tipNickname"></span></td>
                </tr>
                <tr>
                  <th height="24">密码:</th>
                  <td colspan="3"><input name="password" type="password" onfocus="clsChk.showTip('Password')" onblur="clsChk.checkPassword()" class="input01"  /></td>
                </tr>
                <tr>
                  <th width="80" height="20"></th>
                  <td colspan="3"><span id="tipPassword"></span></td>
                </tr>
                <tr>
                  <th height="24">确认密码:</th>
                  <td colspan="3"><input name="passwordcfm" type="password" onfocus="clsChk.showTip('PasswordConfirm')" onblur="clsChk.checkPasswordConfirm()" class="input01" /></td>
                </tr>
                  <tr>
                  <th width="80" height="20"></th>
                  <td colspan="3"><span id="tipPasswordConfirm"></span></td>
                </tr>
                <tr>
                  <th height="24">验证码:</th>
                  <td colspan="3"><input type="text" class="input02" style="float:left; margin-right:5px; background:#fff; color:#955633;" name="code" />
                    <img id="imgVerifyCode" alt="点击更换" align="absmiddle" onclick="changeVerifyCode();" style=" vertical-align:middle; border:0; margin:0; padding:0 ;float:left" width="60" height="21"/></td>
                </tr>
                <tr>
                  <td colspan="4" style="padding-top:px; padding-left:68px;"><input type="image" src="images/tc_100209_btn.jpg" name="button" id="button" /></td>
                </tr>
              </table>
          </form>
         </div>
         </div>
    <img src="images/tc_100209_bg.png"/></div>
<div id="bg"></div>
   </div>
</body>
<script type="text/javascript">

</script>
</html>

昏....我用FF 打开你那个连接图片是XX 需要下载插件

调试易

用asp.net做一个这种效果的注册页面，高分求救！（100）

解决方案 »