弹出模态对话框,背景变灰不可操纵!哪一位朋友做过啊?

我们在浏览网页的时候,常常碰到在弹出一个提示或登录框的时候,总是弹出一个自定义模态的对话模框,并且背景变灰不可操纵的效果.例如在百度,QQ网站里,有的时候在登录的时候,常常会看到.只知道是用ajax可以去实现,具体如何去实现,能否提供一个思路,谢谢!如果有实例就更好啦...

解决方案 »

  1.   

    网页不知道,但是winForm的时候可以new 一个无边框的新窗体,然后把新窗体的owner 设为主窗体,大小覆盖parent就可以了,然后再将需要的窗体置顶...我觉得网页也可以这样做...试试看
      

  2.   

    其实就是两个div层，一个100%宽度和长度的div层（防止用户操作），放在最上面，css调整颜色为透明一点
    然后在最上面放一个登陆层，从而实现遮罩效果给你一个简介的例子
    <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>
      

  3.   

    这种模拟的,用Tab键可以切换焦点到底层的,然后输入或点击按钮都是可以做到的.有没有真正能够屏蔽底层的模态窗呢? 记得有些网页的发布页需要登陆，当你点进去的时候,会自动弹出登陆窗口,如果关闭它,则退回上一页.如果用这种恐怕就不太安全了