zoukankan      html  css  js  c++  java
  • 表单遮住弹出层解决方法(select遮住DIV)

    IE6中下拉框把弹出层遮住了,表单遮住弹出层解决方法(select遮住DIV),在IE6下,下拉框(select)会遮住弹出层 ,在IE6下,下拉框(select)会遮住弹出层,IE6下div不能将select框遮住
    以上是相关的百度搜索,看来同样的问题很多人都遇到过,我也是!


    解决方法


    第一個解決辦法 :

    在IE6下下拉框(select)会遮住弹出层,用样式办法暂时无法解决,包括z-index这个属性。

    最变态的方法:

    就是在层弹出的时候把下拉框给隐藏掉,用display:none属性或visable:hiddle属性;当层隐藏的时候再把下拉框给显示出来:

    function hiddenselect()
    {
        var f = document.forms["form1"];
        if (f)
        {
        for (i=0;i<f.elements.length;i++)
       {
       if (f.elements[i].type=="select-one")
       {
       f.elements[i].style.display="none";
       }
       }
       }
    }

    function showselect()
    {
        var f = document.forms["form1"];
        if (f)
        {
        for (i=0;i<f.elements.length;i++)
       {
       if (f.elements[i].type=="select-one")
       {
       f.elements[i].style.display="";
       }
       }
       }
    }


    第二個解決辦法

    select元素在ie中是属于一个特例,它和其他的html元素不同,从浏览器层面来解释,它实际上是一个窗体级别的元素(如果有做过c/s开发,应该会知道这点),所以它的优先级大大高于其他所有的html标签,只要有它在的地方,它就会从所有元素的背后冒出个头来,而只有同样窗体级的frame才能遮住它(废话,要是遮不住select,那这个东东不就从frame外冒出来?)

    而微软为了解决这个问题,就给iframe(这个东东不是窗体级的哦!)增加了一个属性,让它能够遮住select(不然在一个iframe外诡异地出现一个select……成何体统),因此,iframe在ie中就附有了这个神圣的使命,遮住select,不让它随意地抛头露面。

    而且,由于iframe本身并不是窗体级别的元素,所以只要设置z-index,就可以设置iframe在页面中的层次关系,利用这一点就可以很方便来遮住那个不怎么讨喜的select。代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>runcode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Sheneyan" />
    <script type="text/javascript">
    function initBK(){
    var o = document.createElement('iframe');
    o.id = 'fram_bk';
    document.body.appendChild(o);
    }
    function popMenu(e){
    var o = window.event?event.srcElement:e.target;
    var p = getXY(e);
    if (document.all){
        if (!$('fram_bk')){initBK();}
        with ($('fram_bk').style){
          display='block';
          top = p.y+"px";
          left = p.x+"px";
        }
    }
    with ($('menu').style){
        display='block';
        top = p.y+"px";
        left = p.x+"px";
    }
    }
    function getXY(e){
    var posx=0,posy=0;
    if(e==null) e=window.event;
    if(e.pageX || e.pageY){
        posx=e.pageX; posy=e.pageY;
        }
    else if(e.clientX || e.clientY){
        if(document.documentElement.scrollTop){
            posx=e.clientX+document.documentElement.scrollLeft;
            posy=e.clientY+document.documentElement.scrollTop;
            }
        else{
            posx=e.clientX+document.body.scrollLeft;
            posy=e.clientY+document.body.scrollTop;
            }
        }
        return {x:posx,y:posy};
    }
    function $(id){return document.getElementById(id)}
    </script>
    <style type="text/css">
    div#menu{display:none;position:absolute;200px;height:300px;z-index:100;background:yellow;}
    iframe#fram_bk{border:0;position:absolute;display:none;z-index:0;200px;height:300px;}
    </style>
    </head>
    <body>
    <button onclick="popMenu(event)">探出菜单</button><br />
    <div id="menu">測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单</div>
    <select><option>这是select哦</option></select>
    </body>
    </html>
  • 相关阅读:
    《ERP从内部集成起步》读书笔记——第2章 从优化业务流程谈信息集成的必要性 2.1从流程优化的需要理解信息化与管理的关系 2.1.1全局观念和全流程
    《ERP从内部集成起步》读书笔记——第一章 Garthner公司是如何提出ERP的 1.4 ERP内部集成与MRP II
    Reporting Service中Rdlc导出为pdf中文字乱码解决方法
    善用Wink将电脑操作录屏为Flash文件
    树本来就是疯的
    关于启动BIM工程硕士教育的思考
    AIRPAK3.0用户指导手册第一部分手册简介
    梦想
    How to Deal With Bullies 如何应对欺负你的人
    为什么说面试荒诞
  • 原文地址:https://www.cnblogs.com/zhwl/p/2383646.html
Copyright © 2011-2022 走看看