CSDN“无满意结帖”时，弹出一个小窗口，没有标题栏的，但主窗口变成灰灰色。这种效果怎么实现？

CSDN“无满意结帖”时，弹出一个小窗口，没有标题栏的，但主窗口变成灰灰色。这种效果怎么实现？点击后，弹出一个小窗口，但主容器的东西不可以动了。这个东西怎么做的？

解决方案 »

  1.   

    可以使用CSS的滤镜 + DIV
      

  2.   

    那个可以使用jquery来实现
    jquery网站http://www.jquery.com
    加载后再添加一个插件就可以了。
    插件下载和演示地址：
    http://trentrichardson.com/Impromptu/index.php
    如果不是你要的效果就当我没有说。
      

  3.   


    <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=50);
       opacity:0.2;
    }
    #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;
       /*
        margin:
        检索或设置对象四边的外延边距。
    　　如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
    　　如果只提供一个，将用于全部的四边。
    　　如果提供两个，第一个用于上－下，第二个用于左－右。
    　　如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
    　　内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
    　　在IE4+，margin属性不可用于td和tr对象。
    　　外延边距始终透明。   */
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function createDiv()
    {
        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");
        
        document.body.removeChild(box);
        document.body.removeChild(shadow);
    }
    -->
    </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>
      

  4.   

    jquery网站http://www.jquery.com 
    加载后再添加一个插件就可以了。 
    插件下载和演示地址： 
    http://trentrichardson.com/Impromptu/index.php 
    如果不是你要的效果就当我没有说。