如何做一个界面，让背后变灰，按界面后的关闭键才恢复正常。

Question

这个很常见吧,触发一个事件,生成一个半透明的浮动div，大小和窗口大小一致，将窗口注册上onresize和onscroll事件，动态调整div的位置和大小就可以了

Answer 1

比如某些简单的查询，通过Ajax查询结果，通过浮动框提示一下，不破坏主框。

Answer 2

http://www.scriptlover.com/controls/

Answer 3

现在很多，ext, dojo, prototype都有类似的现成代码。

Answer 4

//*********  锁屏DIV ***************************
function LockScreen(tag,title,width,height,url)
{
    if (tag) //锁屏
    {
        var lockdiv = document.getElementById("lockscreen");
        if (lockdiv!=null)
        {
            lockdiv.style.display = "block";
            var subdiv = document.getElementById("subdialog");
            if (subdiv!=null)
            {
                subdiv.style.display = "block";
                document.getElementById("dialog1").src = url;
            }           
        }else{
            //创建新的锁屏DIV,并执行锁屏
            var tabframe= document.createElement("div");
            tabframe.id = "lockscreen";
            tabframe.name = "lockscreen";
            tabframe.style.top = '0px';
            tabframe.style.left = '0px';
            tabframe.style.height = '100%';
            tabframe.style.width = '100%';
            tabframe.style.position = "absolute";
            tabframe.style.filter = "Alpha(opacity=10)";
            tabframe.style.backgroundColor="#000000";
            tabframe.style.zIndex = "99998";
            document.body.appendChild(tabframe);
            tabframe.style.display = "block";
            //子DIV
            var subdiv = document.createElement("div");
            subdiv.id = "subdialog";
            subdiv.name = "subdialog";
            subdiv.style.top = Math.round((tabframe.clientHeight-height)/2);
            subdiv.style.left = Math.round((tabframe.clientWidth-width)/2);
            subdiv.style.height = height+'px';
            subdiv.style.width = width+'px';
            subdiv.style.position = "absolute";
            subdiv.style.backgroundColor="red";
            subdiv.style.zIndex = "99999";
            subdiv.style.filter = "Alpha(opacity=100)";
            subdiv.style.border = "1px";
            subdiv.onmousemove = mouseMoveDialog;
            subdiv.onmousedown = control_onmousedown;
            subdiv.onmouseup = mouseUp;
            document.body.appendChild(subdiv);
            subdiv.style.display = "block";
            //subdiv.onclick=UNLockScreen;
            var iframe_height = height-30;
            var titlewidth = width-14;
            var html = "<table border='0' cellpadding='0' cellspacing='0'>"
            html += "<tr><td></td><td>";
            html += "<table><tr><td><font color='#FFFFFF'><b>"+title+"</b></font></td><td style='width:30px' valign='top'><img src='/images/images/close.gif' onclick='UNLockScreen();' style='cursor:hand;'></img></td></tr></table>";
            html += "</td><td></td></tr>";
            html += "<tr><td></td><td style='height:100px;'><iframe id='dialog1' frameborder=0 style='width:"+titlewidth+"px;height:" + iframe_height + "px' src='"+url+"'></iframe></td><td></td></tr>";
            html += "<td></td><td></td><td></td>";
            html += "</table>";
            subdiv.innerHTML = html;
        }
    }else{
        //解屏
        var lockdiv = document.getElementById("lockscreen");
        if (lockdiv!=null)
        {
            lockdiv.style.display = "none";
        }
        var subdiv = document.getElementById("subdialog");
        if (subdiv!=null)
        {
            subdiv.style.display = "none";
        }
    }
}
function UNLockScreen()
{
   LockScreen(false);
}//调用方法LockScreen(true,"标题",424,314,http://www.baidu.com);

Answer 5

 
//*********  锁屏DIV *************************** 
function LockScreen(tag,title,width,height,url) 
{ 
    if (tag) //锁屏 
    { 
        var lockdiv = document.getElementById("lockscreen"); 
        if (lockdiv!=null) 
        { 
            lockdiv.style.display = "block"; 
            var subdiv = document.getElementById("subdialog"); 
            if (subdiv!=null) 
            { 
                subdiv.style.display = "block"; 
                document.getElementById("dialog1").src = url; 
            }          
        }else{ 
            //创建新的锁屏DIV,并执行锁屏 
            var tabframe= document.createElement("div"); 
            tabframe.id = "lockscreen"; 
            tabframe.name = "lockscreen"; 
            tabframe.style.top = '0px'; 
            tabframe.style.left = '0px'; 
            tabframe.style.height = '100%'; 
            tabframe.style.width = '100%'; 
            tabframe.style.position = "absolute"; 
            tabframe.style.filter = "Alpha(opacity=10)"; 
            tabframe.style.backgroundColor="#000000"; 
            tabframe.style.zIndex = "99998"; 
            document.body.appendChild(tabframe); 
            tabframe.style.display = "block"; 
            //子DIV 
            var subdiv = document.createElement("div"); 
            subdiv.id = "subdialog"; 
            subdiv.name = "subdialog"; 
            subdiv.style.top = Math.round((tabframe.clientHeight-height)/2); 
            subdiv.style.left = Math.round((tabframe.clientWidth-width)/2); 
            subdiv.style.height = height+'px'; 
            subdiv.style.width = width+'px'; 
            subdiv.style.position = "absolute"; 
            subdiv.style.backgroundColor="red"; 
            subdiv.style.zIndex = "99999"; 
            subdiv.style.filter = "Alpha(opacity=100)"; 
            subdiv.style.border = "1px"; 
            subdiv.onmousemove = mouseMoveDialog; 
            subdiv.onmousedown = control_onmousedown; 
            subdiv.onmouseup = mouseUp; 
            document.body.appendChild(subdiv); 
            subdiv.style.display = "block"; 
            //subdiv.onclick=UNLockScreen; 
            var iframe_height = height-30; 
            var titlewidth = width-14; 
            var html = " <table border='0' cellpadding='0' cellspacing='0'>" 
            html += " <tr> <td> </td> <td>"; 
            html += " <table> <tr> <td> <font color='#FFFFFF'> <b>"+title+" </b> </font> </td> <td style='width:30px' valign='top'> <img src='/images/images/close.gif' onclick='UNLockScreen();' style='cursor:hand;'> </img> </td> </tr> </table>"; 
            html += " </td> <td> </td> </tr>"; 
            html += " <tr> <td> </td> <td style='height:100px;'> <iframe id='dialog1' frameborder=0 style='width:"+titlewidth+"px;height:" + iframe_height + "px' src='"+url+"'> </iframe> </td> <td> </td> </tr>"; 
            html += " <td> </td> <td> </td> <td> </td>"; 
            html += " </table>"; 
            subdiv.innerHTML = html; 
        } 
    }else{ 
        //解屏 
        var lockdiv = document.getElementById("lockscreen"); 
        if (lockdiv!=null) 
        { 
            lockdiv.style.display = "none"; 
        } 
        var subdiv = document.getElementById("subdialog"); 
        if (subdiv!=null) 
        { 
            subdiv.style.display = "none"; 
        } 
    } 
} 
function UNLockScreen() 
{ 
  LockScreen(false); 
} //调用方法 LockScreen(true,"标题",424,314,http://www.baidu.com);