弹出一个层居中锁屏

<script type="text/javascript" language="javascript">
//more javascript from http://www.smallrain.net
  function sAlert(str){
  var msgw,msgh,bordercolor;
  msgw=400;//msg width
  msgh=100;//msg height
  titleheight=25 //msg title height
  bordercolor="#c51100";//
  titlecolor="#c51100";//
  
  var sWidth,sHeight;
  sWidth=screen.width;
  sHeight=screen.height;  var bgObj=document.createElement("div");
  bgObj.setAttribute('id','bgDiv');
  bgObj.style.position="absolute";
  bgObj.style.top="0";
  bgObj.style.background="#cccccc";
  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="close";
    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>
call : 
<input type="button" value="click" onclick="sAlert('test');" />

解决方案 »

  1.   

    Div(FullScreen+Css Filter)+Div(Dialogue)
      

  2.   

    ajax不适合去控制无数据纯简单的页面状态。
      

  3.   

    我要的 问题：
    我在一个 页面上设计好了一个div。起初他是隐藏的。那我怎么通过点击这个页面的一个button后，把这个隐藏的div显示并居中，然后显示后把这个页面锁屏效果
    能举个简单例子我看下吗？
      

  4.   

    新问题，我重新开贴在这里，会的人能到http://topic.csdn.net/u/20080826/08/3e66be9b-0493-426c-b2cf-c9728a0bcf86.html帮下好吗？呵呵，谢谢了
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>display</title>
    <style type="text/css">
    .div {width:500px; height:300px; background:green; margin:200px auto;}
    </style>
    <script type="text/javascript">
    function disPlay()
    {
       var btn = document.getElementById("display");
    if (btn) {
    var myDiv = document.getElementById("mydiv");
    myDiv.style.display="";
    btn.style.display="none";
    }
    }
    function dNone()
    {
    if(document.getElementById("innerbtn"))
    {
    var btn = document.getElementById("display");
    btn.style.display = "";
    var myDiv = document.getElementById("mydiv");
    myDiv.style.display = "none";
    }
    }
    </script>
    </head>
    <body>
    <input type="button" id="display" onclick="disPlay()" value="onclick" />
    <div id="mydiv" class="div" style="display:none;">
             <input type="button" id="innerbtn" onclick="dNone()" value="none" />
             </div>
    </body>
    </html>
      

  6.   

    你要解决几个问题。
    1.要有设计好的div的引用。
    2把div挂到body下。
    3.把div display设成“”
    4.把div定位到屏幕的中间。5.得到全屏的高和宽，让一个div把屏盖住。网上有例子你可以看看。http://games.sina.com.cn/50sg/
      

  7.   

    你要解决几个问题。 
    1.要有设计好的div的引用。 
    2把div挂到body下。 
    3.把div display设成“” 
    4.把div定位到屏幕的中间。 5.得到全屏的高和宽，让一个div把屏盖住。 网上有例子你可以看看。 http://games.sina.com.cn/50sg/ 
      

  8.   

    其实就是两个div层，一个100%宽度和长度的div层（防止用户操作），放在最上面，css调整颜色为透明一点 
    然后在最上面放一个登陆层，从而实现遮罩效果 给你一个简介的例子 HTML code<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Demo</title>
    <style type="text/css">
    <!--
    *{
       margin:0;
       padding:0;
    }
    html,body{
       height:100%;
    }
    #shadow{
       position:absolute;　
       left:0;
       top:0;
       width:100%;
       height:100%;
       background-color:#0060C0;
       filter:alpha(opacity=20);
    }
    #box{
       position:absolute;
       left:50%;
       top:50%;
       width:400px;
       height:180px;
       margin:-90px 0 0 -200px;
       border:1px solid #84A0C4;
       background-color:#DFE8F6;
       text-align:center;
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function createDiv()
    {
        var btnShow = document.getElementById("btnshow");
        btnShow.disabled=true;    var shadow = document.createElement("div");
        shadow.setAttribute("id","shadow");
        shadow.style.zIndex="10";    var box=document.createElement("div");
        box.setAttribute("id","box");
        box.style.zIndex="999";
        
        var spanUser=document.createElement("span");
        spanUser.innerHTML="User:";    var textUser=document.createElement("input");
        textUser.setAttribute("type","text");
        textUser.setAttribute("id","textUser");    var button=document.createElement("input");
        button.setAttribute("type","button");
        button.setAttribute("id","button1");
        button.setAttribute("value","Confirm");
        button.onclick=hideDiv;    box.appendChild(spanUser);
        box.appendChild(textUser);
        box.appendChild(button);    document.body.appendChild(shadow);
        document.body.appendChild(box);
    }
    function hideDiv()
    {
        var textUser=document.getElementById("textUser");
        var user=document.getElementById("user");
        user.value=textUser.value;    var box=document.getElementById("box");
        var shadow=document.getElementById("shadow");
        var btnShow=document.getElementById("btnShow");
        
        document.body.removeChild(box);
        document.body.removeChild(shadow);
        btnShow.disabled=false;   
    }
    -->
    </script>
    </head>
    <body>
    <div style="text-align:center">
    <input id="user" type="text" />
    <input id="btnshow" type="button" onclick="createDiv()" value="Display" />
    </div>
    </body>
    </html>
      

  9.   

    所谓锁屏
    其实只是个模拟效果而已
    真正要达到锁屏只能用modaldialog具体的例子
    这个CSDN回复帖子的登陆页面不就是个例子嘛
      

  10.   

    整个100％的div覆盖页面最简单
      

  11.   

    来学习一下，我的msn：[email protected]
      

  12.   

    Sorry,最近比较没时间回头研究这帖回贴内容。再过段时间比较有空，我再研究看看。然后再结贴