彈出遮罩層

彈出層：
#idBox {
 position:fixed;
 /*position:absolute; */
     width:530px; /*Addnew*/
 height:400px;
 /*visibility:hidden;*/
 text-align:right;
 background-color:#FFFFFF;
 border:1px solid #C5C5C5 ;
 display:none;
}
變灰的層（全屏）：
#frmBox {
 position:absolute;
 /*position:absolute; */
 background-color:#c0c0c0;
/* background-color:#ffff !important;*/
        FILTER:alpha(opacity=20);
 display:none;
 /*z-index:1*/
}
我在ie8可以實現，但在FF怎麼也實現不了!請高手幫忙！小女子感激不盡！
是用asp做的網站。

解决方案 »

  1.   

    建议用现成的一些遮罩层，thickbox等
      

  2.   

    ajax中弹出模式窗体的时候不是有个阴影的效果，试试用哪个
      

  3.   

    <BODY BGCOLOR="#ffffff" >
        <DIV ID="frmBox"></DIV>
        <DIV ID="idBox" NAME="idBox">
    <IFRAME ID="frmPage" NAME="frmPage" CLASS="frmPage" STYLE="height:100%;width:100%;margin-left:1px;margin-bottom:1px;" FRAMEBORDER="0" MARGINHEIGHT="0" MARGINWIDTH="0"></IFRAME>
       </DIV>
    ......
    [b]js:[/b]
    function dispalyDiv(f_url,Id,_Id) {  
    window.document.getElementById("frmBox").style.left = 0;
    window.document.getElementById("frmBox").style.top = 0;
    window.document.getElementById("frmBox").style.width = window.document.body.scrollWidth;
    window.document.getElementById("frmBox").style.height = window.document.body.scrollHeight;
    window.document.getElementById("frmBox").style.display = "inline";
    window.document.getElementById("idBox").style.top = window.document.getElementById("idBox").style.left = "25%"
    window.document.getElementById("idBox").style.marginTop = window.document.body.scrollTop - window.document.getElementById("idBox").offsetHeight / 2 + "px";
    window.document.getElementById("idBox").style.marginLeft = window.document.body.scrollLeft - window.document.getElementById("idBox").offsetWidth / 2 + "px";
    window.document.getElementById("idBox").style.display = "inline";
           //window.document.all["frmPage"].src = f_url+"?Id="+Id+"&_Id="+_Id;
    window.document.getElementById("frmPage").src = f_url+"?Id="+Id+"&_Id="+_Id;

    }
    在子窗體的子窗體調用上面的函數。也在前面加了window.parent.parent.document.get.....
    但是層有顯示也有內容，在ie8可以屏蔽操作，但是在ff就不行。不能屏蔽
      

  4.   

    遮罩層 
    <SCRIPT src="../js/ui.mouse.js" type=text/javascript></SCRIPT>
      <SCRIPT src="../js/ui.draggable.js" type=text/javascript></SCRIPT>
      <SCRIPT src="../js/jquery.jwindow.js" type=text/javascript></SCRIPT>
    <asp:Button ID="bt_edit" Text="修 改" CssClass="inputButton" OnClientClick=<%# "OpenWindow('"+Eval("Id")+"', 700,250);return false;" %> runat="server"/> function OpenWindow(id,width,height) {
      var p = document.getElementById("<%=hf_Id.ClientID %>").value;
      var url = "unit.aspx?Id=" + id + "&pId=" + p;
      SetTitle(url);
      OpenJWindow('#openwin', url, width, height, EditClosed);
    }
    function SetTitle(url)
    {
      var obj = document.getElementById("winTitle");
        
      if(url.lastIndexOf("Id") >0){
      obj.innerHTML ="编辑";
      return;
      }  
      obj.innerHTML ="新增";
    }function EditClosed(result) {  if (result == "0") return;
      document.getElementById("<%=LinkButton1.ClientID %>").click();
      return false;
    }
      

  5.   

    用jQery啦，有很多实例，可下载，源代码，http://www.shilidata.com/topictag-127.aspx
      

  6.   

    #frmBox {
    position:absolute;
    /*position:absolute; */
    background-color:#c0c0c0;
    /* background-color:#ffff !important;*/
      FILTER:alpha(opacity=20);
    opacity=0.2；ff用opacity
    display:none;
    /*z-index:1*/
    }
      

  7.   

    我加了opacity:0.5 不行；之前加了background-color:rgba(212,0,0,0.5); 也不行，在FF 下完全沒變化。背景色完全不起作用！郁悶！！
      

  8.   


    <!--测试了下ie6 7 ff都可以-->
    <head>
        <title>无标题页</title>
        <style>
    #areaDiv{position:absolute;z-index:2;background:#000;width:1000px;height:500px;filter:alpha(opacity=30);opacity:0.3}
        </style>
    </head>
    <body>    
    <div id="areaDiv"></div>
    </body>
      

  9.   


    還是不行。我加的z-index:1 在IE8可以有屏蔽效果，但是連彈出的層也無法操作了。看來是不能加z-index  的吧     
      

  10.   

    你弹出层的z-index要大于遮罩层的z-index;
    比如你的遮罩层z-index:1;那弹出层的z-index要大于1，这样弹出层才能在遮罩层上，才能操作
      

  11.   

    #frmBox {
    position:absolute;
    /*position:absolute; */
    background-color:#c0c0c0;
    /* background-color:#ffff !important;*/
      FILTER:alpha(opacity=20);
    display:none;
    /*z-index:1*/
    }
    你这里display:none，弹出层的时候有没有把遮罩层的display设置为block?
    你用我刚测试的代码在你ff上测试下！
      

  12.   

    函數帶有:
    window.document.getElementById("frmBox").style.display = "inline";
    window.document.getElementById("idBox").style.display = "inline";
    我試過了 可以 但是只能用絕對的像素嗎？我用width:100% 就沒效果了 
      

  13.   

    如果你的高和宽都用100%的话，这样只有当div内容撑开时才会有那么内容的高度
    你可以设置
    网页可见区域宽： document.body.clientWidth
    网页可见区域高： document.body.clientHeight
    等于那个遮罩层的宽高
      

  14.   

    非常感謝！我弄好了！！
    window.document.getElementById("frmBox").style.left = 0 + "px";
    window.document.getElementById("frmBox").style.top = 0 + "px";
    window.document.getElementById("frmBox").style.width = window.document.body.scrollWidth + "px";
    原來就在這後面加上“ px”就行了。真鬱悶的！