登 录
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件<br /> 可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，<br /> 他们被渲染在客户区的绘画表面上，<br /> 而select是使用的标准windows控件，只是作为客户区的子控件放置而已，<br /> 它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，<br /> 比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。<br /> 有多种种办法;<br /> 1. 修改select，不用标准select，而是自己用其他html元素模拟<br /> 2. 修改你的div，使用iframe。<br /> 3. 在div被显示的时候或者到达select所在位置时隐藏select<br /> 4. 在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。<br /> 5.Object对象的优先度较高,可以挡住select框<br /> 以下例子系网上资源整理<br /> 原址：http://hi.baidu.com/suofang/blog/item/72f2f7ed23f2324e78f055c4.html<br /> 第4种方法的例子：最好的方法：iframe来当作div的底<br /> Div被Select挡住，是一个比较常见的问题。<br /> 有的朋友通过把div的内容放入iframe或object里来解决。<br /> 可惜这样会破坏页面的结构，互动性不大好。 </p> <p> 这里采用的方法是： </p> <p> 虽说div直接盖不住select<br /> 但是div可以盖iframe，而iframe可以盖select,<br /> 所以，把一个iframe来当作div的底，<br /> 这个div就可以盖住select了. </p> <p><html><br /> <head><br /> <mce:script type="text/javascript"><!--<br /> function DivSetVisible(state)<br /> {<br /> var DivRef = document.getElementById('PopupDiv');<br /> var IfrRef = document.getElementById('DivShim');<br /> if(state)<br /> {<br /> DivRef.style.display = "block";<br /> IfrRef.style.width = DivRef.offsetWidth;<br /> IfrRef.style.height = DivRef.offsetHeight;<br /> IfrRef.style.top = DivRef.style.top;<br /> IfrRef.style.left = DivRef.style.left;<br /> IfrRef.style.zIndex = DivRef.style.zIndex - 1;<br /> IfrRef.style.display = "block";<br /> }<br /> else<br /> {<br /> DivRef.style.display = "none";<br /> IfrRef.style.display = "none";<br /> }<br /> }<br /> // --></mce:script><br /> </head><br /> <body><br /> <form><br /> <select><br /> <option>A Select Box is Born ....</option><br /> </select><br /> </form><br /> <div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100"><br /> .... and a DIV can cover it up<br/>through the help of an IFRAME.<br /> </div><br /> <iframe id="DivShim" src="javascript:false;" mce_src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"><br /> </iframe><br /> <br/><br /> <br/><br /> <a href="#" mce_href="#" onclick="DivSetVisible(true)">Click to show DIV.</a><br /> <br/><br /> <br/><br /> <a href="#" mce_href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a><br /> </body><br /> </html><br /> 第3种方法的例子：最直接的方法:隐藏下拉框.<br /> 下面提供的是一个比较通用的一组函数:<br /> test.htm<br /> ------------<br /> <mce:script type="text/javascript"><!--<br /> var HideElementTemp = new Array();<br /> //点击菜单时，调用此的函数,菜单对象<br /> function cal_hideElementAll(obj){<br /> cal_HideElement("IMG",obj);<br /> cal_HideElement("SELECT",obj);<br /> cal_HideElement("OBJECT",obj);<br /> cal_HideElement("IFRAME",obj);<br /> }<br /> function cal_HideElement(strElementTagName,obj){<br /> try{<br /> var showDivElement = obj;<br /> var calendarDiv = obj;<br /> var intDivLeft = cal_GetOffsetLeft(showDivElement);<br /> var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;<br /> //HideElementTemp=new Array()<br /> for(i=0;i<window.document.all.tags(strElementTagName).length; i++){<br /> var objTemp = window.document.all.tags(strElementTagName)[i];<br /> if(!objTemp||!objTemp.offsetParent)<br /> continue;<br /> var intObjLeft=cal_GetOffsetLeft(objTemp);<br /> var intObjTop=cal_GetOffsetTop(objTemp);<br /> if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&<br /> (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&<br /> (intObjTop+objTemp.clientHeight>intDivTop)&&<br /> (intObjTop<intDivTop+calendarDiv.style.posHeight)){<br /> //var intTempIndex=HideElementTemp.length;//已经有的长度<br /> //save elementTagName is stutas<br /> //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);<br /> HideElementTemp[HideElementTemp.length]=objTemp<br /> objTemp.style.visibility="hidden";<br /> }<br /> }<br /> }catch(e){alert(e.message)<br /> }<br /> }<br /> function cal_ShowElement(){<br /> var i;<br /> for(i=0;i<HideElementTemp.length; i++){<br /> var objTemp = HideElementTemp[i]<br /> if(!objTemp||!objTemp.offsetParent)<br /> continue;<br /> objTemp.style.visibility=''<br /> }<br /> HideElementTemp=new Array();<br /> }<br /> function cal_GetOffsetLeft(src){<br /> var set=0;<br /> if(src && src.name!="divMain"){<br /> if (src.offsetParent){<br /> set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);<br /> }<br /> if(src.tagName.toUpperCase()!="BODY"){<br /> var x=parseInt(src.scrollLeft,10);<br /> if(!isNaN(x))<br /> set-=x;<br /> }<br /> }<br /> return set;<br /> }<br /> function cal_GetOffsetTop(src){<br /> var set=0;<br /> if(src && src.name!="divMain"){<br /> if (src.offsetParent){<br /> set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);<br /> }<br /> if(src.tagName.toUpperCase()!="BODY"){<br /> var y=parseInt(src.scrollTop,10);<br /> if(!isNaN(y))<br /> set-=y;<br /> }<br /> }<br /> return set;<br /> }<br /> // --></mce:script><br /> <select></select><br /> <select></select><br /> <div style="position:absolute;left:0;top:0;width:100;height:100;background-color:red" onclick="cal_hideElementAll(this)"><br /> 点击让select隐藏<br /> </div><br /> <br><br><br><br><br><br><br /> <input type="button" value="点击让select显示" onclick="cal_ShowElement()"><br /> 以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.<br /> 第2种方法：用iframe作载体<br /> 以下是一简单的例子:<br /> -----------<br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"><br /> <meta name="ProgId" content="FrontPage.Editor.Document"><br /> <title>简单菜单</title><br /> <!--<br /> 提供定位函数，用iframe作载体，不会被select挡住<br /> By Fason(2003-5-21)<br /> --><br /> <mce:style id=s><!--<br /> #div1{<br /> position:absolute;<br /> z-index:100;<br /> width:100;<br /> height:130;<br /> background-color:#d2e8ff;<br /> border:1 solid black;<br /> }<br /> div{cursor:hand;font-size:12px;}<br /> a{text-decoration:none;color:red;font-size:12px}<br /> --></mce:style><style id=s mce_bogus="1">#div1{<br /> position:absolute;<br /> z-index:100;<br /> width:100;<br /> height:130;<br /> background-color:#d2e8ff;<br /> border:1 solid black;<br /> }<br /> div{cursor:hand;font-size:12px;}<br /> a{text-decoration:none;color:red;font-size:12px}</style><br /> </head><br /> <body><br /> <mce:script type="text/javascript"><!--<br /> function window.onload(){<br /> var shtml=div1.innerHTML;<br /> var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")<br /> ifm.style.width=div1.offsetWidth<br /> ifm.style.height=div1.offsetHeight<br /> ifm.name=ifm.uniqueID<br /> div1.innerHTML=""<br /> div1.appendChild(ifm)<br /> window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")<br /> }<br /> function show(){<br /> with(document.all.img1){<br /> x=offsetLeft;<br /> y=offsetTop;<br /> objParent=offsetParent;<br /> while(objParent.tagName.toUpperCase()!= "BODY"){<br /> x+=objParent.offsetLeft;<br /> y+=objParent.offsetTop;<br /> objParent = objParent.offsetParent;<br /> }<br /> y+=offsetHeight-1<br /> }<br /> with(document.all.div1.style){<br /> pixelLeft=x<br /> pixelTop=y<br /> visibility=''<br /> }<br /> }<br /> function hide(){<br /> document.all.div1.style.visibility='hidden'<br /> }<br /> // --></mce:script><br /> <img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif" mce_src="ie.gif"><br><select></select><br /> <div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;" mce_style="visibility:hidden;"><br /> <div href="http://www.csdn.net" mce_href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">中国程序员</div><br /> <div href="http://www.sohu.com" mce_href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">sohu</div><br /> </div><br /> </body><br /> </html><br /> 第5种方法：Object对象的优先度较高,可以挡住select框<br /> <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><br /> <select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button><br /> 这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法.
抱歉!评论已关闭.