您的位置：首页 > 其它

select挡住div的5种解决方法

2014-04-18 13:33 197 查看

在IE中,select属于window类型控件，它会“挡住”所有非window类型控件。可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，

比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。

有多种种办法;

1.
修改select，不用标准select，而是自己用其他html元素模拟

2.
修改你的div，使用iframe。

3.
在div被显示的时候或者到达select所在位置时隐藏select

4.
在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。

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

第4种方法的例子：最好的方法：iframe来当作div的底

Div被Select挡住，是一个比较常见的问题。



有的朋友通过把div的内容放入iframe或object里来解决。



可惜这样会破坏页面的结构，互动性不大好。





这里采用的方法是：





虽说div直接盖不住select



但是div可以盖iframe，而iframe可以盖select,



所以，把一个iframe来当作div的底，



这个div就可以盖住select了.

<html>

<head>

<script>

function
DivSetVisible(state)

{

var DivRef =
document.getElementByIdx_x_x('PopupDiv');

var IfrRef =
document.getElementByIdx_x_x('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/
e267
>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>

第3种方法的例子：最直接的方法:隐藏下拉框.

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

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种方法：用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>



<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_x_x("<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.a(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>

第5种方法：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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航