[转]当层遇到了select框时

转载 2004年10月10日 16:22:00
 
   
   
标题   层遇到select框时     
关键字   下拉框 层 被挡住
出处  
 

作者:fason

当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.

1.最直接的方法:隐藏下拉框.

下面提供的是一个比较通用的一组函数:

test.htm

------------

<script>
var HideElementTemp = new Array();
//点击菜单时,调用此的函数,菜单对象
function cal_hideElementAll(obj){
        cal_HideElement("IMG",obj);
        cal_HideElement("SELECT",obj);
        cal_HideElement("OBJECT",obj);
        cal_HideElement("IFRAME",obj);
}
function cal_HideElement(strElementTagName,obj){
try{
    var showDivElement = obj;
    var calendarDiv = obj;
    var intDivLeft = cal_GetOffsetLeft(showDivElement);
    var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
    //HideElementTemp=new Array()
    for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
 var objTemp = window.document.all.tags(strElementTagName)[i];
 if(!objTemp||!objTemp.offsetParent)
     continue;
 var intObjLeft=cal_GetOffsetLeft(objTemp);
 var intObjTop=cal_GetOffsetTop(objTemp);
 if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
    (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
    (intObjTop+objTemp.clientHeight>intDivTop)&&
    (intObjTop<intDivTop+calendarDiv.style.posHeight)){
     //var intTempIndex=HideElementTemp.length;//已经有的长度
  //save elementTagName is stutas
     //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);
     HideElementTemp[HideElementTemp.length]=objTemp
     objTemp.style.visibility="hidden";
        }
    }
}catch(e){alert(e.message)
}
}

function cal_ShowElement(){
    var i;
    for(i=0;i<HideElementTemp.length; i++){
 var objTemp = HideElementTemp[i]
 if(!objTemp||!objTemp.offsetParent)
     continue;
 objTemp.style.visibility=''
    }
    HideElementTemp=new Array();
}
function cal_GetOffsetLeft(src){
    var set=0;
    if(src && src.name!="divMain"){
        if (src.offsetParent){
           set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
 }
 if(src.tagName.toUpperCase()!="BODY"){
     var x=parseInt(src.scrollLeft,10);
     if(!isNaN(x))
            set-=x;
 }
    }
    return set;
}

function cal_GetOffsetTop(src){
    var set=0;
    if(src && src.name!="divMain"){
        if (src.offsetParent){
            set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
   }
 if(src.tagName.toUpperCase()!="BODY"){
     var y=parseInt(src.scrollTop,10);
     if(!isNaN(y))
  set-=y;
 }
    }
    return set;
}

</script>
<select></select>
<select></select>
<div style="position:absolute;left:0;top:0;width:100;height:100;background-color:red" onclick="cal_hideElementAll(this)">
点击让select隐藏
</div>
<br><br><br><br><br><br>
<input type="button" value="点击让select显示" onclick="cal_ShowElement()">

以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.

2.Object对象的优先度较高,可以挡住select框

<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT>
<select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>

这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法

 

3.用iframe作载体

以下是一简单的例子:

-----------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>简单菜单</title>
<!--
提供定位函数,用iframe作载体,不会被select挡住
By Fason(2003-5-21)
-->
<style id=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solid black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<script>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=""
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")
}

function show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= "BODY"){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function hide(){
document.all.div1.style.visibility='hidden'
}
</script>
<img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br><select></select>
<div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;">
<div href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">中国程序员</div>
<div href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">sohu</div>
</div>
</body>
</html>

在一个人陷入困境时,最需要的是别人的关心与帮助

俗话说:“多一个朋友多一条路”。在生活中,志趣相同的人毕竟是少数,如果只与这些少数人来往,那么结交朋友的范围一定十分有限,只能是控制在一个极小的圈子里,不能够向外拓展。其实,与各式各样的朋友交往,对自...
  • jwqdcsszh
  • jwqdcsszh
  • 2008年07月21日 16:47
  • 2437

解决 "GStreamer 遇到了常规流错误"问题

 1 、在终端输入:sudo apt-get remove totem-gstreamer2 、在终端输入:sudo apt-get install totem-xine totem-mozilla ...
  • xpx3216
  • xpx3216
  • 2008年12月09日 10:39
  • 1564

层遇到select框时

当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.1.最直接的方...
  • alex197963
  • alex197963
  • 2007年05月06日 00:14
  • 574

层遇到select框时

作者:fason当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢...
  • cngkqy
  • cngkqy
  • 2008年12月18日 09:11
  • 1482

提示:Windows CE CAB 向导遇到了错误。有关更多信息,请参阅输出窗口。

       在Mobile程序部署时,出现Windows CE CAB 向导遇到了错误。有关更多信息,请参阅输出窗口 的错误提示,解决办法如下: 解决方案: 1、在部署的安装包项目的属性中,把其中的...
  • taomanman
  • taomanman
  • 2010年03月18日 14:29
  • 1883

Windows CE CAB 向导遇到了错误。有关更多信息,请参阅输出窗口

解决方案: 选中智能设备CAB项目,点击F4,把Manufacture的名称改成非中文的就行了。...
  • u011556426
  • u011556426
  • 2017年08月20日 17:00
  • 300

nyoj92图像有用区域【bfs】

图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 “ACKing”同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑...
  • R1986799047
  • R1986799047
  • 2015年08月12日 12:37
  • 359

iOS APP 提交App Store过程中遇到的问题

就不说上架之前遇到的测试,bug的解决,证书,以及账号的问题了。现在具备了可以上架的条件,往往这个时候会出现一些比较棘手的被拒问题。...
  • qijian_shashi
  • qijian_shashi
  • 2017年12月25日 13:56
  • 56

boost enable_if——SFINAE(匹配失败不是错误)

让我们看下这段程序: 很简单的一个重载;如我所愿,程序正常运行结果如下: void func(int) void func(T) [with T = Test] ...
  • cd2108006026
  • cd2108006026
  • 2012年09月20日 14:07
  • 2205

Visual Studio警告IDE0006的解决办法

Visual Studio警告IDE0006的解决办法
  • u014621518
  • u014621518
  • 2017年07月28日 09:58
  • 796
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[转]当层遇到了select框时
举报原因:
原因补充:

(最多只允许输入30个字)