首页 > 代码库 > 让层遮挡select(ie6下的问题)

让层遮挡select(ie6下的问题)

虽然现在很多比较大的网站已经不考虑ie6了,不过这些方法,或者其中原理还是值得记录下来的。所以整理的时候,把这篇文章留下了。

<script language="javascript">

var ie55up = IsIE55Up();
var overIframe = null;

function DivOver(objID)
{
var obj = document.all[objID];
// 只有IE5.5以上Iframe的z-index才有效
if (ie55up)
{
if (overIframe == null)
{
overIframe = document.createElement("<iframe src=http://www.mamicode.com/‘about:blank‘ ");
}
document.body.insertAdjacentElement("beforeEnd",overIframe);
with(overIframe.style)
{
top = obj.style.top;
left = obj.style.left;
width = obj.offsetWidth;
height = obj.offsetHeight;
display = ‘block‘;
}
obj.style.zIndex = "999";
}
else // 隐藏被ID为objID的对象(层)遮挡的所有select
{
var sels = document.getElementsByTagName_r(‘select‘);
for (var i = 0; i < sels.length; i++)
  if (Obj1OverObj2(document.all[objID], sels))
sels.style.visibility = ‘hidden‘;          
}
}

//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
  var pos1 = getPosition(obj1)
  var pos2 = getPosition(obj2)
  var result = true;
  var obj1Left = pos1.left - window.document.body.scrollLeft;
  var obj1Top = pos1.top - window.document.body.scrollTop;
  var obj1Right = obj1Left + obj1.offsetWidth;
  var obj1Bottom = obj1Top + obj1.offsetHeight;
  var obj2Left = pos2.left - window.document.body.scrollLeft;
  var obj2Top = pos2.top - window.document.body.scrollTop;
  var obj2Right = obj2Left + obj2.offsetWidth;
  var obj2Bottom = obj2Top + obj2.offsetHeight;
  
  if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
      obj1Left >= obj2Right || obj1Top >= obj2Bottom)
    result = false;
  return result;
}

// 获取对象的坐标
function getPosition(Obj)
{
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop}
}

// 是否IE5.5以上版本
function IsIE55Up () {
var agt = navigator.userAgent.toLowerCase();
var isIE = (agt.indexOf("msie")!=-1);
if (isIE)
{
var stIEVer = agt.substring(agt.indexOf("msie ") + 5);
var verIEFull = parseFloat(stIEVer);
return verIEFull >= 5.5;
}
return false;
}
</script>
<script>
    window.onload = function(){DivOver("div1")}
</script>

<div style="position: absolute;left:10px;top:20px;width:200px;height:85px;border:1px solid red;" id="div1">
看看现在这个层下面的select不是简单的隐藏了:)
</div>
<select name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>

<select name="">
<option>test1test1test1test1test1test1test1test1test1test1test1test1test1test1</option>
<option>test2</option>
<option>test3</option>
</select>

<select name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>


最后自己先点评下:
上面的方法可以解决这个问题。不过有时也会只出现ifram白块,但要显示的东西没有出来这时你要修改“overIframe = document.createElement("<iframe src=http://www.mamicode.com/‘about:blank‘ ");”为“overIframe = document.createElement("<iframe src=http://www.mamicode.com/‘about:blank‘ ");”,就是去掉其中的“z-index:998;”,然后后面的“obj.style.zIndex = "999";”也可以不要,不过最好还是按上面的写。
希望可以帮大家解决问题。