none
怎么用div层屏蔽指定的div? RRS feed

  • 问题

  • 页面上用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);
            }

    2009年12月7日 9:41

答案


  • <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>

    • 已标记为答案 scate233 2009年12月8日 10:09
    2009年12月8日 9:23
  • CSS   中的   filter:alpha(opacity=50);  去掉
    。。。。。。。。。。
    • 已标记为答案 scate233 2009年12月8日 10:09
    2009年12月8日 9:16

全部回复

  • 屏蔽? 还不如直接加载一张图片比较快
    屏蔽跟快慢无关系  加载数据越多 浏览器加载越慢 看网速了
    你这个用ajax 加载  你当解锁屏蔽 用ajax从服务器加载html数据
    2009年12月7日 10:39
  •    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就可以轻松实现。
    2009年12月8日 0:46
  • 你好,

    我觉得Ajax中的UpdateProgress可以满足你的要求。
    你可以参考下面链接中的例子,结合div试试。
    http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx
    Microsoft Online Community Support
    2009年12月8日 3:00
  • UpdateProgress 用过,老板不喜欢,他要的效果是像这里回帖那样的的效果

    3楼的objLoad 是什么来的
    2009年12月8日 3:16
  • UpdateProgress 用过,老板不喜欢,他要的效果是像这里回帖那样的的效果

    3楼的objLoad 是什么来的



    objLoad在JS里面是不用定义变量或对象类型的。赋值后默认声明。。
    2009年12月8日 3:54
  • UpdateProgress 用过,老板不喜欢,他要的效果是像这里回帖那样的的效果

    3楼的objLoad 是什么来的

    都差不多 这个用ajax js控制的 提交时候换图片 然后传送到服务器处理 返回一个布尔值 提示
    2009年12月8日 4:47
  • 3L的那段是用 divLoad 来盖 divTree 吧
    下面那段是不是应该是

             objLoad = document.getElementById('divLoad');
                objLoad.style.display='block';
                objTree = document.getElementById('divTree');
                objTree.style.display='none';
    2009年12月8日 6:33
  • 刚才试验了一下,这种似乎是替换显示的效果,如果要做到像论坛回帖那样半透明的话,就是能看到下面那层,该怎么弄?
    2009年12月8日 6:38
  • 刚才试验了一下,这种似乎是替换显示的效果,如果要做到像论坛回帖那样半透明的话,就是能看到下面那层,该怎么弄?

    http://zhidao.baidu.com/question/40618489.html?si=3 用css现实
    2009年12月8日 7:20
  • 我的
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    <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;
    }


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

    2009年12月8日 8:49
  • CSS   中的   filter:alpha(opacity=50);  去掉
    。。。。。。。。。。
    • 已标记为答案 scate233 2009年12月8日 10:09
    2009年12月8日 9:16

  • <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>

    • 已标记为答案 scate233 2009年12月8日 10:09
    2009年12月8日 9:23
  •  发现一个小漏洞:在最下面要被屏蔽的div里放一个TextBox,然后启动遮盖,然后按Tab键切换可以进到那个被遮盖的TextBox里去写东西,是不是在启动遮盖时要屏蔽掉一些按键比较好
    2009年12月8日 10:16