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>
  • 相关阅读:
    10个超实用的PHP代码片段
    MySQL支撑百万级流量高并发的网站部署详解
    程序员总结:帮助你早些明白一些道理
    50个最常用的UNIX / Linux命令(结合实例)
    php.ini 核心配置选项说明
    智能指针的死穴 循环引用
    滥用vector带来的瓶颈
    JS——层的遮罩效果
    【趣】无广告看视频
    【SQLServer】远程访问数据库进行配置
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1376860.html
Copyright © 2011-2022 走看看