- 浏览: 8587 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
select挡住div的5种解决方法
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件。可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，
比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。
<wbr></wbr>
有多种种办法;
1. 修改select，不用标准select，而是自己用其他html元素模拟
2. 修改你的div，使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4. 在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。
5.Object对象的优先度较高,可以挡住select框
<wbr></wbr>
第4种方法的例子：最好的方法：iframe来当作div的底
<wbr></wbr>
Div被Select挡住，是一个比较常见的问题。<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 有的朋友通过把div的内容放入iframe或object里来解决。<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 可惜这样会破坏页面的结构，互动性不大好。<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 这里采用的方法是：<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr></wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 虽说div直接盖不住select<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 但是div可以盖iframe，而iframe可以盖select,<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 所以，把一个iframe来当作div的底，<wbr><wbr></wbr></wbr>
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> 这个div就可以盖住select了.<wbr><wbr></wbr></wbr>
<wbr></wbr>
<wbr></wbr>
<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/>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>
<wbr></wbr>
<wbr></wbr>
第3种方法的例子：最直接的方法:隐藏下拉框.
<wbr></wbr>
下面提供的是一个比较通用的一组函数:
<wbr></wbr>
test.htm
<wbr></wbr>
------------
<wbr></wbr>
<script>
var HideElementTemp = new Array();
//点击菜单时，调用此的函数,菜单对象
function cal_hideElementAll(obj){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> cal_HideElement("IMG",obj);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> cal_HideElement("SELECT",obj);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> cal_HideElement("OBJECT",obj);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> cal_HideElement("IFRAME",obj);
}
function cal_HideElement(strElementTagName,obj){
try{
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var showDivElement = obj;
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var calendarDiv = obj;
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var intDivLeft = cal_GetOffsetLeft(showDivElement);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> //HideElementTemp=new Array()
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
var objTemp = window.document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> continue;
var intObjLeft=cal_GetOffsetLeft(objTemp);
var intObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> (intObjTop+objTemp.clientHeight>intDivTop)&&
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> (intObjTop<intDivTop+calendarDiv.style.posHeight)){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> //var intTempIndex=HideElementTemp.length;//已经有的长度
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> //save elementTagName is stutas
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> HideElementTemp[HideElementTemp.length]=objTemp
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> objTemp.style.visibility="hidden";
<wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr> <wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>}
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> }
}catch(e){alert(e.message)
}
}
<wbr></wbr>
function cal_ShowElement(){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var i;
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> for(i=0;i<HideElementTemp.length; i++){
var objTemp = HideElementTemp[i]
if(!objTemp||!objTemp.offsetParent)
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> continue;
objTemp.style.visibility=''
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> }
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> HideElementTemp=new Array();
}
function cal_GetOffsetLeft(src){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var set=0;
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> if(src && src.name!="divMain"){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> if (src.offsetParent){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
}
if(src.tagName.toUpperCase()!="BODY"){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var x=parseInt(src.scrollLeft,10);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> if(!isNaN(x))
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> set-=x;
}
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> }
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> return set;
}
<wbr></wbr>
function cal_GetOffsetTop(src){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var set=0;
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> if(src && src.name!="divMain"){
<wbr><wbr><wbr></wbr></wbr></wbr> <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>if (src.offsetParent){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
<wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr> }
if(src.tagName.toUpperCase()!="BODY"){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> var y=parseInt(src.scrollTop,10);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> if(!isNaN(y))
<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr> set-=y;
}
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> }
<wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr> return set;
}
<wbr></wbr>
</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()">
<wbr></wbr>
以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.
<wbr></wbr>
第2种方法：用iframe作载体
<wbr></wbr>
以下是一简单的例子:
<wbr></wbr>
-----------
<wbr></wbr>
<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_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>")
}
<wbr></wbr>
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>
<wbr></wbr>
第5种方法：Object对象的优先度较高,可以挡住select框
<wbr></wbr>
<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>
<wbr></wbr>
这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法。
发表评论
相关推荐
/** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...
用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...
Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 test2 test3 Div被Select挡住，是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来...
解决IE6 中select 穿透 div 等层的问题
select ——使用DIV 实现 Select js源码
ie6下select覆盖div的解决办法
Div下拉菜单被Select挡住的解决办法</title> </head><body> <div style=”z-index: 10; position: absolute; width: 100; height: 18; overflow: hidden;” onmouseover=”this....
select实现div图层切换效果，使用jquery简单易懂、方便修改
select 在ie6下覆盖div bug 解决方案。 div 模拟select 单选 在 body onload事件中调用init_select方法就可，参数传相关背景图片就可。我都已经放到资源包下了。
div+css模拟select
jquery DIV模拟select,样式美观、大方、可自己更换背景、不懂的私我
jQuery+div+css模拟select自定义下拉列表框，简单轻巧实用。
div 模拟 select 多选 实现还有点bug，望大家一起改正。
div+css打造select下拉菜单,可自己修改相应样式!!!
使用div模拟select效果,可点击页面其他任意地方隐藏下拉框
使用div+css，实现select美化效果，兼容谷歌，火狐，IE6以上浏览器等。
用div+jq高仿ie6的select表单随内容增加 进行了一个升级，将其做成一个类似插件的形式； 在html中，依旧是应用传统的select进行布局，只需要给select一个class为toDiv，就可以动态的将select替换为已经设置好了的div...
介绍： 效果演示：麦田圈 只要在层里面加上下面代码就可以了~ <iframe src="" frameborder=0></iframe>
一款纯 DIV+CSS+JS 的仿Select下拉表单 兼容目前主流浏览器！