解决弹出层被Flash及select挡住的问题

Tc711Com提示：网页弹出的层被Flash 或Select 下拉列表阻挡的解决方法.

网页弹出的层被Flash 或Select 下拉列表阻挡的解决方法！
今天在做网页的时候，我想在flash上放一个层，然后放图片等内容，可是总是被flash遮挡，因此总结了一下
对于这方面的问题的几个解决方法，希望可以对朋友和自己有帮助！

1.flash把层遮挡住了，如何处理呢？
============================================================在Flash里面加两个参数：
<param value="transparent">
<param value="Opaque">

说明：
<param value="transparent"> FLASH将透明
<param value="Opaque"> FLASH仍将保持不透明

并且还要在最后<embed 里加上 wmode="transparent" 这个特别重要，作用是保持flash在火狐下也正常。

Flash的例子：

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="605" height="167">          <param name="movie" value="a.swf" /> <PARAM NAME="FlashVars" VALUE=""> <PARAM NAME="WMode" VALUE="Transparent"> <PARAM NAME="Play" VALUE="-1"> <PARAM NAME="Loop" VALUE="-1"> <PARAM NAME="Quality" VALUE="High"> <PARAM NAME="SAlign" VALUE=""> <PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""> <PARAM NAME="AllowScriptAccess" VALUE="always"> <PARAM NAME="Scale" VALUE="ShowAll"> <PARAM NAME="DeviceFont" VALUE="0"> <PARAM NAME="EmbedMovie" VALUE="0"> <PARAM NAME="BGColor" VALUE=""> <PARAM NAME="SWRemote" VALUE=""> <PARAM NAME="MovieData" VALUE=""> <PARAM NAME="SeamlessTabbing" VALUE="1">          <embed wmode="transparent" src="a.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="605" height="167"></embed>       </object>2.如果是弹出的层<div></div> 被<select> 下拉列表所阻挡，有2个方法可以解决！

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

<IFRAME>可以遮挡住<SELECT>。所以要使层能够遮挡住下面的列表，只要在层中加入一个和层相同大小的<Iframe>就可以了。
具体做法如下：
<DIV>

<IFRAME width="100%" height="100%" style="; 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=';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))
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=";left:10px;top:20px;width:200px;height:85px;border:1px solid red;" >
看看现在这个层下面的select不是简单的隐藏了：）
</div>
<select >
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<P />

<select >
<option>test1test1test1test1test1test1test1test1test1test1test1test1test1test1</option>
<option>test2</option>
<option>test3</option>
</select>
<P />

<select >
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<P />

http://www.cnblogs.com/joejoe/archive/2008/10/06/829111.html 这个哥们写的不错

用了<param value="transparent">
      <param value="Opaque"> 这两个属性迎刃而解

为什么会被遮住呢？查了一下

由于embed标签的显示层高于div等其他页面元素,因此会被其遮盖.

一般通过隐藏embed标签的方法来防止遮盖.

昨天在做一个调研时发现,可以直接设置 embed 标签的 wmode=’ transparent’ 属性,这样就可以使弹出层遮盖住

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

这个问题解决的方法还要在css里设置一个背景这样弹出层的时候flash透明背景出现那张图片 ok了~ 不过就不会动了==

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

FusionCharts组件生成的Flash遮挡DIV的解决办法

在使用FusionChart的时候，生成的Flash上会产生层遮挡问题

解决的办法是修改FusionChart.js文件

//Set background color
if(c) { this.addParam('bgcolor', c); }

//Set Quality
this.addParam('quality', 'high');

this.addParam('wmode', 'transparent');//这个是需要添加的

//Add scripting access parameter
this.addParam('allowScriptAccess', 'always');

但是这会引起背景色的变化，所以需要自己设置Chart的背景属性

更多的解决弹出层被Flash及select挡住的问题请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2011-9-17