zoukankan      html  css  js  c++  java
  • 使DIV不被select等控件遮挡的解决办法

         在IE中,select属于window类型控件,它会“挡住”所有非window类型控件
    可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,
    他们被渲染在客户区的绘画表面上,
    而select是使用的标准windows控件,只是作为客户区的子控件放置而已,
    它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件,
    比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。

    有4种办法;
    1. 修改select,不用标准select,而是自己用其他html元素模拟
    2. 修改你的div,使用iframe。
    3. 在div被显示的时候或者到达select所在位置时隐藏select
    4. 在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。

    第4种方法的例子:

    <html>
    <head>
    <script>
    function DivSetVisible(state){
         var DivRef = document.getElementById('PopupDiv');
         var IfrRef = document.getElementById('DivShim');
        if(state){
                      DivRef.style.display = "block";
                      IfrRef.style.width = DivRef.offsetWidth;
                      IfrRef.style.height = DivRef.offsetHeight;
                      IfrRef.style.top = DivRef.style.top;
                      IfrRef.style.left = DivRef.style.left;
                      IfrRef.style.zIndex = DivRef.style.zIndex - 1;
                      IfrRef.style.display = "block";
       }else{
                     DivRef.style.display = "none";
                     IfrRef.style.display = "none";
       }
    }
    </script>
    </head>
    <body>
    <form>
    <select>
    <option>A Select Box is Born ....</option>
    </select>
    </form>
    <div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
    .... and a DIV can cover it up<br/>through the help of an IFRAME.
    </div>
    <iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
    </iframe>
    <br/>
    <br/>
    <a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
    <br/>
    <br/>
    <a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
    </body>
    </html>
  • 相关阅读:
    windows下 安装 rabbitMQ 及操作常用命令
    C#中关于DataGridView行和列的背景色-前景色设置
    使用Linq判断DataTable数据是否重复
    C#用mouse_event模拟鼠标点击的问题
    ApartmentState.STA
    使用WebBrowser,内存一直增加的解决办法
    HOT SUMMER 每天都是不一样,积极的去感受生活 C#关闭IE相应的窗口 .
    您访问的URL地址不被允许。
    CMSIS-DAP for STLink V2.1 and STLink v2.1 mini adapter
    DG449 High Voltage Single SPDT Analog Switch in SOT23-8
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1376860.html
Copyright © 2011-2022 走看看