怎么用div层屏蔽指定的div？

Question

页面上用Updatepanel划分了好几块，有些块load的时间会比较长，在load的时候想 用div层屏蔽正在load的那块div，这块被屏蔽的div有id的，并显示一幅图片，load完后用后台控制解除屏蔽，或者在屏蔽div上加个按钮允许用户用前台解除屏蔽。

找了一些都是直接把整个页面屏蔽掉的

.dis{   width:100%;     background:   green;   position:absolute;   left:0;   right:0;   top:0;   bottom:0;   -moz-opacity:0.5;   filter:alpha(opacity=50);
z-index:99;   height:100%;   }  

function test2() {
            var div = document.createElement("<div   class='dis'   oncontextmenu='return   false;'>");
            var iframe = document.createElement("<iframe   class='dis'   style='z-index:98;'>");
            document.getElementsByTagName("body")[0].appendChild(iframe);
            document.getElementsByTagName("body")[1].appendChild(div);
        }

Answer 1

屏蔽? 还不如直接加载一张图片比较快
屏蔽跟快慢无关系  加载数据越多 浏览器加载越慢 看网速了
你这个用ajax 加载  你当解锁屏蔽 用ajax从服务器加载html数据

Answer 2

   div层屏蔽指定的div



<div id="divLoad">
        <img src="img/loading.gif" />
        &nbsp;正在加载......
    </div>
<div id="divTree" style="display:none;">
....................
    </div>

<script type="text/javascript">
        window.onload=function()
        {
            objLoad = document.getElementById('divLoad');
            objLoad.style.display='none';
            objTree = document.getElementById('divTree');
            objTree.style.display='block';
        }
    </script> 你说的功能用UpdateProgress就可以轻松实现。

Answer 3

你好，

我觉得Ajax中的UpdateProgress可以满足你的要求。
你可以参考下面链接中的例子，结合div试试。
http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx

---

Microsoft Online Community Support

Answer 4

UpdateProgress 用过，老板不喜欢，他要的效果是像这里回帖那样的的效果

3楼的objLoad 是什么来的

Answer 5

UpdateProgress 用过，老板不喜欢，他要的效果是像这里回帖那样的的效果

3楼的objLoad 是什么来的

objLoad在JS里面是不用定义变量或对象类型的。赋值后默认声明。。

Answer 6

UpdateProgress 用过，老板不喜欢，他要的效果是像这里回帖那样的的效果

3楼的objLoad 是什么来的

都差不多 这个用ajax js控制的 提交时候换图片 然后传送到服务器处理 返回一个布尔值 提示

Answer 7

3L的那段是用 divLoad 来盖 divTree 吧
下面那段是不是应该是

         objLoad = document.getElementById('divLoad');
            objLoad.style.display='block';
            objTree = document.getElementById('divTree');
            objTree.style.display='none';

Answer 8

刚才试验了一下，这种似乎是替换显示的效果，如果要做到像论坛回帖那样半透明的话，就是能看到下面那层，该怎么弄？

Answer 9

刚才试验了一下，这种似乎是替换显示的效果，如果要做到像论坛回帖那样半透明的话，就是能看到下面那层，该怎么弄？

http://zhidao.baidu.com/question/40618489.html?si=3 用css现实

Answer 10

我的
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<div>
                <input type="button" value="遮盖" onclick="locking()">
    </div>
    <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
        z-index: 2; left: 0px; display: none;">
    </div>

    <div id="ly2" align="center" style="position: absolute; z-index: 3; left: expression((document.t2.offsetWidth)); top: expression((document.t2.offsetHeight));
        background-color: #fff; display: none; border-style: dashed; border-width: 3px;  "  class="dis">
       
 <p class = "p">
        <table width="540" border="0" cellpadding="0" cellspacing="0" style="border: 0   solid   #e7e3e7;
            border-collapse: collapse">
            <tr>
                <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
                    font-weight: bold; font-size: 14px;" height="27" valign="middle">
                    [遮盖]
                </td>
            </tr>
            <tr>
                <td height="130" align="center">
                <img src="loading.gif" /><br>
                    <input type="button" value=" 确定 " onclick="Lock_CheckForm(this);">
                </td>
            </tr>
        </table>
       <p>
    </div>
 <div id="t2"
       
        style="border-style: dashed; border-width: 3px; height: 282px; vertical-align:middle;z-index: 2; width: 785px;" >
        <asp:Button ID="Button1" runat="server" Text="Button"  OnClientClick="test() " />
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
    </div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////
CSS

.dis{   width:100%;       -moz-opacity:0.5;   filter:alpha(opacity=50);z-index:99;   height:100%;   }   

   .p {
color: #000;
font-weight: bold;
position: relative;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
js

 function   locking(){
      document.all.t2.style.display = "block";
      document.all.ly2.style.display = 'block';
      document.all.ly2.style.width =document.all.t2.style.width;
      document.all.ly2.style.height = document.all.t2.style.height;
  }  
  function   Lock_CheckForm(theForm){
      document.all.ly2.style.display = 'none';
  return   false;
}


结果用于遮盖的那层上面的字和图片还是半透明了，要图片和字不透明怎么弄？

Answer 11

CSS   中的   filter:alpha(opacity=50);  去掉

---

。。。。。。。。。。

Answer 12

<style>
.dis{   width:100%;       -moz-opacity:0.5;   filter:alpha(opacity=50);z-index:99;   height:100%;   }  

   .p {
color: #000;
font-weight: bold;
position: relative;
}

</style>
<script>
    function locking() {
        document.all.t2.style.display = "block";
        document.all.Div1.style.display =  document.all.ly2.style.display = 'block';
        document.all.Div1.style.width = document.all.ly2.style.width = document.all.t2.style.width;
        document.all.Div1.style.height = document.all.ly2.style.height = document.all.t2.style.height;
    }
    function Lock_CheckForm(theForm) {
        document.all.Div1.style.display = document.all.ly2.style.display = 'none';
        return false;
    }

</script>
</head>
<body>
    <form id="form1" runat="server">
 
   <div>
                <input type="button" value="遮盖" onclick="locking()">
    </div>
 <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
        z-index: 2; left: 0px; display: none;">
    </div>
 <div style=" position: relative;">
    <div id="ly2" align="center" style="position: absolute; z-index:9; left: expression((document.t2.offsetWidth)); top: expression((document.t2.offsetHeight));
        background-color: #fff; display: none; border-style: dashed; border-width: 3px;   " class="dis"  >
        </div> <div id="Div1" align="center" style="position: absolute; z-index: 10; left: expression((document.t2.offsetWidth)); top: expression((document.t2.offsetHeight));
      display: none; border-style: dashed; border-width: 3px;  "  >
      
 <p class = "p">
        <table width="540" border="0" cellpadding="0" cellspacing="0" style="border: 0   solid   #e7e3e7;
            border-collapse: collapse">
            <tr>
                <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
                    font-weight: bold; font-size: 14px;" height="27" valign="middle">
                    [遮盖]
                </td>
            </tr>
            <tr>
                <td height="130" align="center">
                <img src="loading.gif" /><br>
                    <input type="button" value=" 确定 " onclick="Lock_CheckForm(this);">
                </td>
            </tr>
        </table>
       <p>
    </div></div>
 <div id="t2"
       
        style="border-style: dashed; border-width: 3px; height: 282px; vertical-align:middle;z-index: 2; width: 785px;" >
        <asp:Button ID="Button1" runat="server" Text="Button"  OnClientClick="test() " />
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
    </div>

    </form>
</body>
</html>

Answer 13

 发现一个小漏洞：在最下面要被屏蔽的div里放一个TextBox，然后启动遮盖，然后按Tab键切换可以进到那个被遮盖的TextBox里去写东西，是不是在启动遮盖时要屏蔽掉一些按键比较好