select挡住div的5种解决方法
来源:互联网 发布:淘宝网店推广策划案 编辑:程序博客网 时间:2024/05/01 22:00
在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挡住,是一个比较常见的问题。
<html>
<head>
<script>
functionDivSetVisible(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>
<divid="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 itup<br/>through the help of anIFRAME.
</div>
<iframeid="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 showDIV.</a>
<br/>
<br/>
<a href="#"onclick="DivSetVisible(false)">Click to hideDIV.</a>
</body>
</html>
第3种方法的例子:最直接的方法:隐藏下拉框.
下面提供的是一个比较通用的一组函数:
test.htm
------------
<script>
var HideElementTemp = newArray();
//点击菜单时,调用此的函数,菜单对象
functioncal_hideElementAll(obj){
}
functioncal_HideElement(strElementTagName,obj){
try{
var objTemp =window.document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
varintObjLeft=cal_GetOffsetLeft(objTemp);
varintObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
}catch(e){alert(e.message)
}
}
functioncal_ShowElement(){
var objTemp =HideElementTemp[i]
if(!objTemp||!objTemp.offsetParent)
objTemp.style.visibility=''
}
functioncal_GetOffsetLeft(src){
}
if(src.tagName.toUpperCase()!="BODY"){
}
}
functioncal_GetOffsetTop(src){
if(src.tagName.toUpperCase()!="BODY"){
}
}
</script>
<select></select>
<select></select>
<divstyle="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>
<inputtype="button" value="点击让select显示"onclick="cal_ShowElement()">
以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.
第2种方法:用iframe作载体
以下是一简单的例子:
-----------
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">
<metaname="GENERATOR" content="Microsoft FrontPage4.0">
<metaname="ProgId"content="FrontPage.Editor.Document">
<title>简单菜单</title>
<!--
提供定位函数,用iframe作载体,不会被select挡住
By Fason(2003-5-21)
-->
<styleid=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solidblack;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<script>
functionwindow.onload(){
varshtml=div1.innerHTML;
varifm=document_createElement_x_x("<iframe frameborder=0marginheight=0 marginwidth=0 hspace=0 vspace=0scrolling=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+"<bodyleftmargin=0topmargin=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=img1onmouseover="show()" onmouseout="hide()"src="ie.gif"><br><select></select>
<div id=div1onmouseover="style.visibility=''"onmouseout="style.visibility='hidden'"style="visibility:hidden;">
<divhref="http://www.csdn.net"onmouseover="style.backgroundColor='highlight'"onmouseout="style.backgroundColor=''"onclick="window.open(href)">中国程序员</div>
<divhref="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=aastyle="display:none;z-index:1000; position:absolute; top:0; left:0;width:152; height: 200;" type="text/x-scriptlet"data="about:<body><divstyle='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1solidblack'>test</div>"></OBJECT>
<select><option>hellohellohellohello</select><buttononclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>
这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法。
- select挡住div的5种解决方法
- select挡住div的5种解决方法
- select挡住div的几种解决方法
- select挡住div的5种解决方法(转)
- ie中select挡住div的5种解决方法
- select挡住div的解决方法
- select 挡住 div的解决方法
- div挡住select的5种方法:
- div挡住select的5种方法
- div被select下拉框挡住了--5种解决方法
- Div被Select挡住的解决办法
- select挡住div的解决方法以及frame问题和IE、FLASH与实用代码
- flash挡住DIV层的解决方法
- flash挡住div层的解决方法
- Div被Select挡住解决办法
- 解决 Ie 6下 select挡住div的通用函数
- select下拉列表挡住div层的解决方案
- 解决 Ie 6下 select挡住div的通用函数
- 判断奇数
- 风雨20年:前辈积累的20条编程经验
- 字符、字节的概念及其区别
- Servlet及JSP解决中文乱码问题
- Spring、Struts2、Hibernate集成开…
- select挡住div的5种解决方法
- Grid View(网格视图)
- ASP.NET是如何在IIS下工作的
- cglib动态代理实现原理
- Input Controls(输入控件)
- notepad++ 不让文字下面的红线显示
- SQL SERVER灾难时备份结尾日志的两种方法(tail of log)
- static用法总结
- Buttons(按钮)