function功能实现问题，高手帮忙！！谢谢！！

点击Button出现一个新的窗口，同时主页面变灰。新窗口里有提示信息，同时有一个按钮Button1，点击Button1是主页面可用，新窗口消失。
具体功能就和我们发帖时会出来一个窗口提示我们还有几个帖子没有结贴一样
我目前的实现方式是：
<script type="text/javascript" language="javascript">function ShowNo()//隐藏两个层 
        {
            document.getElementById("doing").style.display = "none";
            document.getElementById("divLogin").style.display = "none";
        }
        function $(id) {
            return (document.getElementById) ? document.getElementById(id) : document.all[id];
        }
        function showFloat()//根据屏幕的大小显示两个层 
        {
            var range = getRange();
            $('doing').style.width = range.width + "px";
            $('doing').style.height = range.height + "px";
            $('doing').style.display = "block";
            document.getElementById("divLogin").style.display = "";
        }
        function getRange()//得到屏幕的大小 
        {
            var top = document.body.scrollTop;
            var left = document.body.scrollLeft;
            var height = document.body.clientHeight;
            var width = document.body.clientWidth;            if (top == 0 && left == 0 && height == 0 && width == 0) {
                top = document.documentElement.scrollTop;
                left = document.documentElement.scrollLeft;
                height = document.documentElement.clientHeight;
                width = document.documentElement.clientWidth;
            }
            return { top: top, left: left, height: height, width: width };
        }     <!--加一个半透明层-->
    <div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;
        background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;display:none;
        left: 0; top: 0; overflow: hidden;">
    </div>
    <!--加一个提示层(也可用于登陆层)-->
    <div id="divLogin" style="border: solid 10px #898989; background: #fff; padding: 10px;display:none;
        width: 780px; z-index: 1001; position: absolute; top: 49%; left: 50%; margin: -200px 0 0 -400px;">
        <div style="padding: 3px 15px 3px 15px; text-align: left; vertical-align: middle;">
            <div>
                <font style="font-weight: bold"><font color="red">重要提示：       
             </div>
            <br />
            <div>
                &nbsp; &nbsp;
                <center>
                    <input id="Button1" type="button" value="同意" onclick="ShowNo()" />
                </center>
            </div>
        </div>
    </div>但是Button都没有用上，当然也没实现这个功能。请高手指点，帮忙实现这个功能。万分感谢！！

解决方案 »

  1.   

    参考
    http://dotnet.aspx.cc/a.htm
    源代码
      

  2.   

    <!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 runat="server">
        <title></title>
        <script type="text/javascript" src="js/jquery-1[1].2.6.js"></script>
        <script type="text/javascript">  //显示灰色JS遮罩层  
        function showBg(ct,content){  
        var bH=$("body").height();  
        var bW=$("body").width()+16; 
        var objWH=getObjWh(ct);  
        $("#fullbg").css({width:bW,height:bH,display:"block"});  
        var tbT=objWH.split("|")[0]+"px"; 
        var tbL=objWH.split("|")[1]+"px"; 
        $("#"+ct).css({top:tbT,left:tbL,display:"block"});  
        $("#"+content).html("<div style='text-align:center'>正在加载，请稍后...</div>");  
        $(window).scroll(function(){resetBg()});  
        $(window).resize(function(){resetBg()});  
        } 
        function getObjWh(obj){ 
        var st=document.documentElement.scrollTop;//滚动条距顶部的距离 
        var sl=document.documentElement.scrollLeft;//滚动条距左边的距离  
        var ch=document.documentElement.clientHeight;//屏幕的高度  
        var cw=document.documentElement.clientWidth;//屏幕的宽度  
        var objH=$("#"+obj).height();//浮动对象的高度 
        var objW=$("#"+obj).width();//浮动对象的宽度  
        var objT=Number(st)+(Number(ch)-Number(objH))/2; 
        var objL=Number(sl)+(Number(cw)-Number(objW))/2;  
        return objT+"|"+objL;  
        } 
        function resetBg(){ 
        var fullbg=$("#fullbg").css("display");  
        if(fullbg=="block"){  
        var bH2=$("body").height(); 
        var bW2=$("body").width()+16;  
        $("#fullbg").css({width:bW2,height:bH2}); 
        var objV=getObjWh("dialog");  
        var tbT=objV.split("|")[0]+"px"; 
        var tbL=objV.split("|")[1]+"px"; 
        $("#dialog").css({top:tbT,left:tbL});  
        }
    } 
        //关闭灰色JS遮罩层和操作窗口  
        function closeBg(){  
        $("#fullbg").css("display","none"); 
        $("#dialog").css("display","none");
    } 
        </script>
        <style type="text/css">
            *{
                font-family:Arial, Helvetica, sans-serif;  
                font-size:12px;  
                }  
                #fullbg{ 
                    background-color: Gray; display:none; z-index:3; position:absolute;  left:0px;  
                    top:0px; filter:Alpha(Opacity=30); /* IE */  -moz-opacity:0.4;   /* Moz + FF */  opacity: 0.4;  } 
                     #dialog {position:absolute; width:200px;height:200px;background:#F00; display: none; z-index: 5;  } 
                     #main { height: 1500px;  } 
          </style> 
    </head>
    <body>
        <form id="form1" runat="server">
      <div id="main"> <a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> 
      </div>
      <!-- JS遮罩层 --> 
      <div id="fullbg"></div> 
      <!-- end JS遮罩层 -->
      <!-- 对话框 --> 
      <div id="dialog"> 
      <div id="dialog_content"></div>
      <div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div> 
      </div> 
      <!-- JS遮罩层上方的对话框 --> 
        </form>
    </body>
    </html>
      

  3.   

    这种东西使用Jqery插件不是更好？