做个好像很多网站一样,无论在哪个页面只要点登录按钮,就会在当前页面上出现登录框,而该页面就没法点击之类的操作了!
我自己做个登录的公共控件,但是没有上面这个效果,第一就是当前页面还是可以点击,第二该登录框直接在当前页面里显示出来的!
请问下该如何做?最好有代码,谢谢

解决方案 »

  1.   

    其实就是弹出一个DIV层加样式
    example:
    <!-- Author:JingLiangliang 
        Data:2008-1-31  -->
    <html> 
      <head>  
      <title>2008年命运</title>  
      <meta http-equiv="Content-Language" content="gb2312" /> 
      </head> 
      <body oncontextmenu="return false"> 
      <div  style="z-index: 100; left: 315px; width: 25%; position: absolute; top: 200px">  
      <input type="button" value="2008年命运" onclick="sAlert('  2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常 2008年不同寻常                                       -- 2008年不同寻常--');" /> 
      </div> 
      <script type="text/javascript" language="javascript"> 
       function sAlert(str){ 
       var msgw,msgh,bordercolor; 
       msgw=400;//提示窗口的宽度 
       msgh=200;//提示窗口的高度 
       titleheight=25 //提示窗口标题高度 
       bordercolor="#336699";//提示窗口的边框颜色 
       titlecolor="#99CCFF";//提示窗口的标题颜色 
       var sWidth,sHeight; 
       sWidth=document.body.offsetWidth; 
       sHeight=screen.height; 
       var bgObj=document.createElement("div"); 
       bgObj.setAttribute('id','bgDiv'); 
       bgObj.style.position="absolute"; 
       bgObj.style.top="0"; 
       bgObj.style.background="#777"; 
       bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
       bgObj.style.opacity="0.6"; 
       bgObj.style.left="0"; 
       bgObj.style.width=sWidth + "px"; 
       bgObj.style.height=sHeight + "px"; 
       bgObj.style.zIndex = "10000"; 
       document.body.appendChild(bgObj);     
       var msgObj=document.createElement("div") 
       msgObj.setAttribute("id","msgDiv"); 
       msgObj.setAttribute("align","center"); 
       msgObj.style.background="white"; 
       msgObj.style.border="1px solid " + bordercolor; 
       msgObj.style.position = "absolute"; 
       msgObj.style.left = "50%"; 
       msgObj.style.top = "50%"; 
       msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
       msgObj.style.marginLeft = "-225px" ; 
       msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
       msgObj.style.width = msgw + "px"; 
       msgObj.style.height =msgh + "px"; 
       msgObj.style.textAlign = "center"; 
       msgObj.style.lineHeight ="25px"; 
       msgObj.style.zIndex = "10001";     
     var title=document.createElement("h4"); 
     title.setAttribute("id","msgTitle"); 
     title.setAttribute("align","right"); 
     title.style.margin="0"; 
     title.style.padding="3px"; 
     title.style.background=bordercolor; 
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
     title.style.opacity="0.75"; 
     title.style.border="1px solid " + bordercolor; 
     title.style.height="18px"; 
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
     title.style.color="white"; 
     title.style.cursor="pointer"; 
     title.innerHTML="2008年命运       关闭"; 
     title.onclick=function(){ 
              document.body.removeChild(bgObj); 
              document.getElementById("msgDiv").removeChild(title); 
              document.body.removeChild(msgObj); 
             } 
     document.body.appendChild(msgObj); 
     document.getElementById("msgDiv").appendChild(title); 
     var txt=document.createElement("p"); 
     txt.style.margin="1em 0" 
     txt.setAttribute("id","msgTxt"); 
     txt.innerHTML=str; 
     document.getElementById("msgDiv").appendChild(txt); 
       } 
      </script> 
     </body> 
    </html>
      

  2.   


    http://blog.csdn.net/chinmo/archive/2008/04/20/2308911.aspx看我博客里的这个例子就清楚了
      

  3.   

    学习,路过,也说两句;
     DIV层 + CSS( 滤镜)!! 好像是这样的吧
      

  4.   

    可以参考一下jQuery BlockUI Plugin,就是实现这种效果,很简单好用的。你自己再写个DIV显隐触发就可以了。