表单遮住弹出层解决方法（select遮住DIV）

最新推荐文章于 2020-08-12 15:51:42 发布

weixin_33937913

最新推荐文章于 2020-08-12 15:51:42 发布

阅读量362

点赞数

文章标签： javascript xhtml ViewUI

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;width:200px;height:300px;z-index:100;background:yellow;}
iframe#fram_bk{border:0;position:absolute;display:none;z-index:0;width:200px;height:300px;}
</style>
</head>
<body>
<button οnclick="popMenu(event)">探出菜单</button><br />
<div id="menu">測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单測試用的菜单</div>
<select><option>这是select哦</option></select>
</body>
</html>

weixin_33937913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单遮住弹出层解决方法（select遮住DIV）

IE6中下拉框把弹出层遮住了，表单遮住弹出层解决方法（select遮住DIV），在IE6下,下拉框(select)会遮住弹出层，在IE6下,下拉框(select)会遮住弹出层，IE6下div不能将select框遮住以上是相关的百度搜索，看来同样的问题很多人都遇到过，我也是！解决方法第一個解決辦法 :在IE6下下拉框(select)会遮住弹出层，用样式办法暂时无法解决，包括z-inde...
复制链接

扫一扫