来自于:
http://www2.flash8.net/teach/3959.htm
我找了好多地方,只有这个文章的内容对我有帮助。
之前先列另一个文章出来:
1. 避免Flash挡住Div层的方式:增加 <param name="wmode" value="transparent">,另外增加<embed wmode="transparent" ...其他选项>
2. select和flash挡住div,可以采取移除节点的方式防止挡住
3. select和flash采用display:none的方式防止挡住
4. 在select和flash上面加一层隐藏的iframe对象,因为iframe对象跟select和flash界面显示平级,然后把目标div放在iframe上面
5. 如果是按钮、提交、图片按钮,采用 button 标签来取代input标签,其他一致
wmode="transparent" 不管用,要用 wmode 为opaque 要用下边文章中写的样子。
如何避免层被其它对象挡住
解决思路
:
根据挡隔对象的不同,解决办法也不同。
具体步骤
:
1.被Flash挡住。
设置Flash的wmode属性值 为opaque或transparent,代码示例:
<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="468" height="60"><param name="movie" value="http://pepsi.flash8.net/pepsi46860.swf">
<param name="wmode" value="opaque"><param name="quality" value="high"><embed src="http://pepsi.flash8.net/pepsi46860.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60" wmode="opaque"></embed></object>
<div style="position:absolute;left:150;top:50;width:100px;height:50px;background:green">
</div>
2.被图片挡住。
这个估计是因为图片也放在层中,而图片所在层的Z轴索引值比该层大,所以被挡住,解决办法是更改该层的Z轴索引值至比图片层大。
代码示例:
<div style="position:absolute;left:0;top:20;z-index:2;background:red;width:120px;height:70px">
1<img src="http://www.flash8.net/images/logo.gif">
</div>
<div style="position:absolute;left:50;top:50;z-index:2;background:green;width:120px;height:70px">
2<img src="http://www.flash8.net/images/logo.gif">
</div>
<div style="position:absolute;left:90;top:80;z-index:2;background:blue;width:120px;height:70px">
3<img src="http://www.flash8.net/images/logo.gif">
</div>
3.被表单控件挡住
这个目前还没有完美的解决方法,一般都是在设计排版时就尽量避免这种情况,如果是万不得已,就在层经过表单控件时让表单控件隐藏,过后再让它显示:
代码示例:
<button onClick="oSelect.style.display=’none’;oLayer.style.display=’inline’">显示层隐藏下拉选项
</button>
<button onClick="oSelect.style.display=’inline’;oLayer.style.display=’none’">显示下拉选项隐藏层</button>
<div style="position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px">
z-index:1<select id="oSelect"><option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1</select>
</div>
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px;display:none">
z-index:2<img src="http://www.flash8.net/images/logo.gif">
</div>
4.当然还有用优先级别较高的控件来代替层的方法解决,但控件并非是每台机器上都有安装,而且控件的可定制性也差,在兼容性上也存在问题。
(1)hhctrl.ocx控件:
<OBJECT id=hhctrl type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" codebase="<I>file:</I>hhctrl.ocx#Version=4,0,0,24" width=80 height=20>
<PARAM name="Command" value="Related Topics, MENU">
<PARAM name="Button" value="Menu">
<PARAM name="Item1" value="[X-Eyes];http://x-lover.com/forums/">
<PARAM name="Item2" value="闪客之吧;http://www.flash8.net">
<PARAM name="Item3" value="零刻联盟;http://www.linkmeng.com/">
<PARAM name="Item4" value="蓝色理想;http://www.blueidea.com/">
<PARAM name="Item5" value="5D多媒体;http://www.5d.cn">
</OBJECT>
<select></select><iframe></iframe>
(2)X-Scriptlet控件
<object style="position:absolute;top:150;left:20;width:100;height:50;border:1px
solid #000000" type="text/x-scriptlet" data="demo.gif"></object>
<SELECT></SELECT><iframe></iframe>
或
<object style="position:absolute;top:150;left:20;width:100;height:50;border:1px solid #000000" type="text/html" data="demo.gif"></object>
<select></select><iframe></iframe>
(3) window.createPopup()
<SCRIPT>
var oPopup = window.createPopup();
function showPopupWin(){
var oPopBody = oPopup.document.body;
oPopBody.style.backgroundColor = "green";
oPopup.show(50, 120, 180, 65,document.body);
}
</SCRIPT>
<BUTTON onclick="showPopupWin()">显示窗口</BUTTON><select></select><iframe></iframe>
注意:用createPopup方法打开的Popup窗口需要IE5.5以上浏览器的支持。
特别提示
本例所给代码的运行效果分别如图1.3.17~图1.3.22所示。
图 1.3.17 层与Flash的优先级别控制
图 1.3.18 层与层间的优先级别控制
图1.3.19层与表单控件的优先级别控制
图 1.3.20 HHCtrl控件与其它控件的优先级测试
图1.3.21X-Scriptlet控件与其它控件的优先级别测试
图1.3.22 Popup窗口与其它控件的优先级别测试
特别说明
本例问题的解决方式需要根据实际情况而定,一般来说用前三种方法就可以了,除非必要,否则尽量不要用后面的三种方法。
总结:
在网上可以找到一些代码,但有些代码只能在ie 下运行,到了firefox里就变了。
以下是一段例子,用z轴的方式来解决问题。但不适合我们的项目。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
body {background:#298DC8;color:#333;font-size:12px;font-family:Arial, Helvetica, Verdana, sans-serif;line-height:150%;}
#t-iframe{ background:#fff; position:relative; z-index:1;}
.box{ position:relative; background:#f7f7f7; border:solid 1px #f09; width:200px; height:200px;}
pre{ padding:8px; color:#f09;}
</style>
</head>
<body>
<div class="box" style="z-index:5; top:50px;">
<pre>
利用pre这个标签可以将
其包起来的文字排版、格
式,原封不动的呈现出来
。算是相当好用的标签之
一。也就是说你输入的东
西被原封不动的输出,包
括你输入的空格之类的,
不用和等来表示空格或者
回车
</pre>
</div>
<iframe id="t-iframe" scrolling="no" frameborder="0" height="300" width="100%" src="http://www.baidu.com"></iframe>
<div style="position:relative; z-index:3;">
<embed height="80" width="750" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="autohigh" src="http://gg.blueidea.com/2009/hp/3/home.swf"/>
</div>
<div class="box" style="z-index:2; top:-230px;">
<pre>
利用pre这个标签可以将其包起来的文
字排版、格式,原封不动的
呈现出来。算是相当好用的标签之一。也
就是说你输入的东西被原封不动的输出,包
括你输入的空格之类的,不用和等来
表示空格或者回车了
</pre>
</div>
<div class="box" style="z-index:4; top:-220px;">
<pre>
利用pre这个标签可以将其包起来的文
字排版、格式,原封不动的
呈现出来。算是相当好用的标签之一。也
就是说你输入的东西被原封不动的输出,包
括你输入的空格之类的,不用和等来
表示ddd
</pre>
</div>
</body>
</html>
以下是我在项目里的代码:
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java"%>
<?xml version="1.0" encoding="UTF-8" ?>
<%
String map_URL = (String)request.getParameter("map_URL");
if(map_URL == null){
Object tempURL = request.getAttribute("map_URL");
if(tempURL == null){
map_URL = "com.wxxr.web.ui.config.systemConfig";//TODO test code
//map_URL = "";
//TODO if user not support any url system will use default url.
}else{
map_URL = tempURL + "";
}
}
String contextPath = request.getContextPath();
%>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<!--
Smart developers always View Source.
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.
Learn more about Flex at http://flex.org
// -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/history/history.css" />
<!-- END Browser History required section -->
<title></title>
<STYLE>
#_iframe{
position: relative;
display: none;
top: 20px;
left: 30px;
background-color: #ffffff;
text-align: center;
border: solid 1px;
padding: 10px;
z-index: 1;
}
</STYLE>
<script src="<%=contextPath%>/AC_OETags.js" language="javascript"></script>
<!-- BEGIN Browser History required section -->
<script src="<%=contextPath%>/history/history.js" language="javascript"></script>
<!-- END Browser History required section -->
<script src="<%=contextPath%>/MxIframe.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 28;
// -----------------------------------------------------------------------------
// -->
</script>
</head>
<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "<%=contextPath%>/playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "workbench",
"quality", "high",
"wmode", "opaque",
"bgcolor", "#869ca7",
"name", "workbench",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"base","<%=contextPath%>/",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "<%=contextPath%>/workbench",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "workbench",
"quality", "high",
"wmode", "opaque",
"bgcolor", "#869ca7",
"name", "workbench",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"base","<%=contextPath%>/",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"flashvars","map_URL=<%=map_URL%>"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<div id="_iframe">
<DIV align=center>
<IFRAME id="_frame" frameBorder=0 marginwidth=0 marginheight=0 scrolling=no width=100% height=100% scrolling=no ALLOWTRANSPARENCY="true">
</IFRAME>
<a href="javascript:iframe_close();">close</a>
</DIV>
</div>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="workbench" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="<%=contextPath%>/workbench.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="<%=contextPath%>/workbench.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="workbench" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</noscript>
</body>
</html>
分享到:
相关推荐
主要介绍了安卓输入框被虚拟键盘挡住的问题(微信开发)的相关资料,需要的朋友可以参考下
行业文档-设计装置-避免被图书侧挡住的可调式代书板.zip
最好的真正解决下拉菜单被flash挡住的解决方法_界面设计_前端技术.
在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢?下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法,一起看看吧
放在UI上面这个UI就可以不被3D物体给挡住解决了3DUI被遮挡的问题 放在UI上面这个UI就可以不被3D物体给挡住解决了3DUI被遮挡的问题 放在UI上面这个UI就可以不被3D物体给挡住解决了3DUI被遮挡的问题 放在UI上面这个UI...
键盘挡住输入框终极解决办法
点击按钮弹出悬浮层,层上有数据且可以关闭 页面点击按钮后出现遮罩层,遮罩层上面有...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。
能很完美的解决文本框被软键盘挡住的问题,使你的界面更漂亮,更人性化。。
下拉菜单被flash给挡住了,解决方法!压缩文件里就是方法,马上下载吧..
winform窗体嵌套,loading,遮罩层实现,progressbar控件。
很漂亮的能挡住下拉表单的CSS+JS下拉菜单.
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 兼容ios8 ios9 ios 10
原本官方的工具有个别参数被挡到,例如挡住了bps的数值,这边的这个工具已经稍加修改,把那些会挡住的字母去掉,请放心下载。工具可以设置扩频因子、带宽、频率等参数计算出最后的速率和功率,还可以计算发送前导码...
亲测可用,可以直接放到项目中进行使用 * 本来以为Actviity设置下android:windowSoftInputMode="adjustResize|adjustPan"就可以解决问题,测试下了发现不行; * adjustPan是把整个界面向上平移,使输入框露出,不会...
Python程序后台截图,不怕窗口被挡住,支出多线程多窗口,截图速度快,一张图片只需30毫秒左右,成品模块,只需传入句柄就能返回图像数据,代码加油注释,方便更改,有图有真相。
使用层制作的下拉菜单下正好有FLASH动画,菜单被动画遮挡.
Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 test2 test3 Div被Select挡住,是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来...
今天小编就为大家分享一篇解决layer弹层遮罩挡住窗体的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
/** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...