- 浏览: 1650977 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
网页弹出的层被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的解决办法
在使用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的背景属性
发表评论
-
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 709用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 777WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 747一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 952<td align="center" ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 747解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
掌控上传进度的AJAX Upload(转贴)
2009-08-05 17:59 716掌控上传进度的AJAX Uploa ... -
深入浅出URL编码
2009-08-11 19:58 642版权声明:如有转载请求,请注明出处: http://blog ... -
Javascript跨域访问解决方案
2009-08-11 20:11 633由于安全方面的考虑,Javascript被限制了跨域访问的能力 ... -
不唐突的JavaScript的七条准则(转载)
2009-08-12 13:18 634经过多年的开发、教学 ... -
浅谈Javascript中的事件流和事件绑定
2009-08-13 16:31 792事件流 浏览器中的事 ... -
JavaScript继承详解(二)
2009-08-17 17:04 624转自:http://www.cnblogs.com/sansh ... -
JavaScript继承详解(一)
2009-08-17 17:04 697转自:http://www.cnblogs.com/sansh ... -
javascript实用技巧--数组.
2009-08-17 17:08 662数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来,免得 ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 585尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
常见的JavaScript错误
2009-08-17 17:19 737作者: Richardy, 出处:IT ... -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
2009-08-17 17:19 662网页可见区域宽:document.body.clientWid ... -
Javascript的Defer属性
2009-08-17 17:48 712Script中的Defer属性 ... -
最佳的"addEvent"是怎样诞生的
2009-08-18 13:47 642IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
值得推荐的事件捕获函数AddEvent()
2009-08-18 13:56 7751, 下面是JQuery之父推荐的添加移除事件方法。 ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 599Absolute ,CSS 中的写法是:positio ...
相关推荐
jquery特效插件FancyBox弹出层支持多种方式弹出层如:图片弹出层、文字信息弹出层、flash弹出层、ajax弹出层、Iframe弹出层。 支持。 IE6 IE7 IE8及以上 Firefox
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题,特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中,"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
总结来说,实现弹出层表单提交数据完美解决,需要关注表单的设计、数据验证、异步通信、安全性以及用户体验等多个方面。通过合理的HTML结构、CSS样式和JavaScript交互,我们可以创建出用户友好且安全的弹出层表单...
标题中的“FLASH弹出层源码”指的是使用Adobe Flash技术实现的一种交互式用户界面元素,通常用于在网页上创建浮动的、半透明的对话框或信息提示层。这些弹出层可以在用户与网页互动时突然显现,提供额外的信息或者...
"20种弹出层"插件以其多样化的弹出效果和易用性,为Web开发者提供了丰富的弹出层解决方案。结合jQuery的灵活性和CSS3的动画效果,该插件能够帮助开发者快速构建引人注目的交互界面,提升用户体验。在实际项目中,...
在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中,我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果,特别是在页面顶部浮动的设计。 首先,让我们了解什么是弹出层。弹出层是一种网页设计技术,它...
在描述中提到“灰常好用”,这可能意味着该弹出层解决方案具有高度的可定制性、良好的兼容性和高效的性能。为了达到这样的效果,开发者可能在以下方面下了功夫: 1. **兼容性**:使用广泛支持的JavaScript语法和CSS...
在本文中,我们将深入探讨如何在layui框架中利用弹出层(layer)进行回调操作,以便获取弹出层内的数据。layui是一个轻量级、模块化的前端UI框架,提供了丰富的组件,包括弹出层功能,使得用户交互变得更加便捷。在...
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果,这在网页设计中是非常常见的一种功能,用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先,让我们理解什么是弹出层。弹...
这个窗口可以是模态的,即阻止用户与页面其余部分交互,直到弹出层被关闭;也可以是非模态的,允许用户同时操作弹出层和背景页面。 在JS中,实现弹出层通常涉及以下步骤: 1. **HTML结构**:首先,需要在HTML中...
本示例"弹出层demo"提供了一个兼容多种浏览器的解决方案,允许开发者自定义样式以适应不同的应用场景。 弹出层在网页设计中扮演着重要角色,它们可以用于各种目的,如表单提交、确认消息、信息提示、设置选项等。此...
在现代Web开发中,实现弹出层全屏展示以及关闭方法是提升用户交互体验的重要技术之一。layer是一款轻量级的页面弹出层插件,它提供了非常方便的方式来实现弹出层的全屏展示以及关闭操作。以下是layer弹出层全屏及...
在本文中,我们将深入探讨如何使用Flash ActionScript 3(AS3)实现一个点击按钮后弹出层,并在层上添加一个关闭按钮以实现层的关闭功能。这是一项常见的交互设计,广泛应用于网页和应用程序中,以提供用户友好的...
在IT领域,弹出层(通常称为Modal窗口或Dialog)是一种常见的用户界面设计元素,用于在用户当前操作的页面上显示额外的信息或者进行特定的交互。"弹出层2"可能是一个专门设计的插件,它允许开发者创建并管理多个同时...
在这个例子中,当弹出层打开时,`dialogOpen`变量被设置为`true`。当尝试刷新页面时,如果`dialogOpen`为`true`,那么页面刷新会被阻止,并向用户显示一个警告消息。 然而,这种做法可能会引起用户体验上的问题,...
在JavaScript中,弹出层通常指的是通过编程方式在网页上动态创建或显示一个浮动的div元素,用于展示信息、提示用户或收集用户输入。这种技术广泛应用于网页交互设计,尤其在不需要新窗口或完全刷新页面的情况下。在...
在.NET开发中,弹出层通常用于在用户与网页交互时提供信息提示、确认操作或者展示详细内容。这种效果能够增强用户体验,使页面看起来更加专业和美观。在本例中,我们将探讨如何在.NET环境中创建具有多层显示、包含...
弹出层,也被称为模态对话框,是在当前页面上覆盖一层半透明或全屏的元素,焦点被锁定在这一层,用户必须先关闭弹出层才能继续与页面交互。实现弹出层的方式有很多种,包括但不限于HTML、CSS和JavaScript的组合使用...
**jQuery弹出层类库详解** 在Web开发中,弹出层(Modal)是一种常见的交互设计,用于在用户与主页面交互时展示额外信息或进行特定操作。jQuery,作为一个广泛使用的JavaScript库,提供了丰富的插件和扩展来实现弹出...