解決彈出層被Flash擋住的問題

網頁彈出的層被Flash 或Select 下拉選單阻擋的解決方法！

 
今天在做網頁的時候，我想在flash上放一個層，然後放圖片等內容，可是總是被flash遮擋，因此總結了一下
對於這方面的問題的幾個解決方法，希望可以對朋友和自己有幫助！

1.flash把層遮擋住了，如何處理呢？
==================================================================

在Flash裡面加兩個引數：
<param name="wmode" value="transparent">
<param name="wmode" value="Opaque">

說明：
<param name="wmode" value="transparent"> FLASH將透明
<param name="wmode" value="Opaque"> FLASH仍將保持不透明

Flash的例子：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 " width="760" height="80">
<param name="movie" value=" http://ad.1m1m.com/AdFiles/200774817589544.swf ">
<param name="quality" value="high">
<embed src=" http://ad.1m1m.com/AdFiles/200774817589544.swf " quality="high" pluginspage=" http://www.macromedia.com/go/getflashplayer " type="application/x-shockwave-flash" width="760" height="80"></embed>
<param name="wmode" value="transparent">
<param name="wmode" value="Opaque">
</object>
2.如果是彈出的層<div></div> 被<select> 下拉選單所阻擋，有2個方法可以解決！

==================================================================
方法一：

<IFRAME>可以遮擋住<SELECT>。所以要使層能夠遮擋住下面的列表，只要在層中加入一個和層相同大小的<Iframe>就可以了。
具體做法如下：
<DIV>
<!--//原來的內容//-->
<IFRAME width="100%" height="100%" style="position:absolute; top:0px; z-index:-1; border-style:none;"></IFRAME>
</DIV>
這個方法對於透明的或外形不規則的層無效。原因很簡單，<IFRAME>是方的，最大的應用我想就是選單了。用這種方法，再也不會出現選單被列表破壞的尷尬了。

方法二：

<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='about:blank' style='position:absolute;left:0;top:0;z-index:998;display:none' scrolling='no' frameborder='0'></iframe>");
}
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('select');
for (var i = 0; i < sels.length; i++)
    if (Obj1OverObj2(document.all[objID], sels[i]))
   sels[i].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>
<P />

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

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

http://www.cnblogs.com/joejoe/archive/2008/10/06/829111.html 這個哥們寫的不錯

用了<param name="wmode" value="transparent">
        <param name="wmode" value="Opaque">   這兩個屬性迎刃而解

為什麼會被遮住呢？查了一下

由於embed標籤的顯示層高於div等其他頁面元素,因此會被其遮蓋.

一般通過隱藏embed標籤的方法來防止遮蓋.

昨天在做一個調研時發現,可以直接 設定 embed 標籤的 wmode=’ transparent’ 屬性,這樣就可以使彈出層遮蓋住

Flash了.(該屬性一般的作用是使flash透明,即可以使flash下面的背景透出來,前提是flash自身是透明的)

這個問題解決的方法還要在css裡設定一個背景 這樣彈出層的時候flash透明 背景出現那張圖片 ok了~ 不過就不會動了==

========================================

FusionCharts元件生成的Flash遮擋DIV的解決辦法