使用者工具

網站工具


program:javascript:select擋住div的5種解决方法

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

program:javascript:select擋住div的5種解决方法 [2008/11/10 17:28] (目前版本)
行 1: 行 1:
 +select挡住div的5种解决方法
 +
 +http://​www.blogjava.net/​fine/​archive/​2007/​08/​07/​134941.html ​
 +
 +在IE中,​select属于window类型控件,它会“挡住”所有非window类型控件
 +可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,
 +他们被渲染在客户区的绘画表面上,
 +而select是使用的标准windows控件,只是作为客户区的子控件放置而已,
 +它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件,
 +比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。
 +
 +有多种种办法;​
 +  - 修改select,不用标准select,而是自己用其他html元素模拟
 +  - 修改你的div,使用iframe。
 +  - 在div被显示的时候或者到达select所在位置时隐藏select
 +  - 在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。
 +  - Object对象的优先度较高,​可以挡住select框
 +
 +以下例子系网上资源整理
 +
 +原址:http://​hi.baidu.com/​suofang/​blog/​item/​72f2f7ed23f2324e78f055c4.html
 +
 +第4种方法的例子:最好的方法:iframe来当作div的底
 +
 +Div被Select挡住,是一个比较常见的问题。 ​  
 +有的朋友通过把div的内容放入iframe或object里来解决。 ​  
 +可惜这样会破坏页面的结构,互动性不大好。 ​  
 +    ​
 +这里采用的方法是: ​  
 +    ​
 +虽说div直接盖不住select ​  
 +但是div可以盖iframe,而iframe可以盖select, ​  
 +所以,把一个iframe来当作div的底, ​  
 +这个div就可以盖住select了. ​  
 +
 +<code html>
 +<​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>​
 +</​code>​
 +第3种方法的例子:最直接的方法:​隐藏下拉框.
 +
 +下面提供的是一个比较通用的一组函数:​
 +
 +test.htm
 +
 +------------
 +<​code>​
 +<​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()">​
 +</​code>​
 +以上这种方法,​如果对于select框数目少,​相对固定的话,​直接用obj.style.visibility="​hidden"​这样进行隐藏是更直接的.
 +
 +第2种方法:用iframe作载体
 +
 +以下是一简单的例子:​
 +
 +-----------
 +<​code>​
 +<​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>​
 +</​code>​
 +第5种方法:Object对象的优先度较高,​可以挡住select框
 +</​code>​
 +<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>​
 +</​code>​
 +这种方法虽然也简单,​但对复杂的层是来说还不是好的解决方法.
  
program/javascript/select擋住div的5種解决方法.txt · 上一次變更: 2008/11/10 17:28 (外部編輯)