确实有效
使用iframe方式解决,如下例子
<!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>
<style type="text/css">
body {margin:0;padding:0;text-align:center;background-color:#eee;}
#bd {margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}
#popup {
position:absolute;left: 443px;top:87px;}
.layer{
width:300px;height:100px;padding:10px;border: 1px solid blue;background-color:#fff; }
#popup iframe{display:none;_display:block;position:absolute;top:0;left:0px;z-index:-1;
filter:mask();
width:320px;height:120px;
}
</style>
</head>
<body>
<div id="bd">
<h1>IE6下div遮盖select的解决方案</h1>
<div><label for="ddTest">Test</label>
<select id="ddTest">
<option>…</option>
<option>pick me</option>
</select>
</div>
</div>
<div id="popup">
<div class="layer">Is the select element poking through? </div>
<iframe></iframe>
</div>
</body>
</html>
注意绿色代码段。
工作原理:iframe能盖住select下拉菜单。
在弹出层增加iframe,并
采用绝对定位,z-index:-1让iframe浮于弹出层下方;
filter:mask();
让iframe透明~
display:none;_display:block;保证FF,IE7以上版本不受影响
width,height值确保iframe大小跟弹出层大小相同
注意事项:
弹出层 最外层区域只设置定位样式(position,left,top,z-index...),避免设置风格显示样式(特别注意边框) 因为iframe在其内,当边线刚好和select框重叠,边线将被select覆盖,影响显示效果
缺陷:需要根据弹出层大小不同,设置iframe大小,局限比较大。
当弹出层为半透明时,被覆盖的下拉菜单消失
分享到:
相关推荐
jQuery popmenu插件是一款专为创建响应式弹出菜单而设计的工具,它能够帮助开发者快速构建适应不同屏幕尺寸的下拉菜单系统,提供良好的触摸设备支持。由于不支持IE8及以下版本的浏览器,popmenu插件充分利用了现代...
解决方案是在弹出层下方添加一个透明的iframe背景,通过调整iframe的z-index值,可以有效地解决这个问题。这种方式虽然古老,但在处理老版本IE浏览器时仍有一定的效果。 关于树型组件的核心知识点包括: 1. **DOM...
ArtDialog还支持弹出菜单,可以创建出层次分明、易于操作的下拉菜单,这对于网站的导航或设置选项非常有用。而调用外部页面的功能则使得ArtDialog可以加载并显示其他网页内容,这在实现内嵌页面或者跨页面操作时非常...
在网页设计中,有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上,以便实现特定的交互效果,如弹出层、提示信息或者自定义下拉菜单等。然而,由于浏览器之间的渲染差异,这往往成为一个挑战。本文将探讨...
在IE6浏览器中,一个常见的问题是在页面上使用div创建的浮动层(通常用于弹出窗口或下拉菜单)会被网页中的下拉列表(DropDownList)遮挡。这是因为IE6处理下拉列表的方式不同,它将DropDownList视为系统级别的控件...
在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...
在IE6浏览器中,一个常见的布局问题是下拉选择框(select元素)在使用div元素制作蒙版或弹出层时会被覆盖,即使给div设置了更高的z-index也无法解决。此问题的根本原因在于IE6对z-index属性的解释与其它浏览器不同,...
绝对定位则常用于创建层叠效果,比如弹出层、下拉菜单等。 在实际的开发过程中,要灵活运用这些属性来实现设计要求。比如,当你需要一个元素始终固定在页面的特定位置,即使页面滚动也不改变位置时,就可以使用...
4. **下拉菜单(Dropdown)**:提供美观的下拉菜单解决方案,适用于导航栏或者表单元素的选择。 5. **焦点图(Tabs)**:用于实现多面板的切换,常见于网站的导航或者内容展示。 6. **输入验证(Validator)**:...
- 下拉菜单:通过JavaScript实现的多级下拉菜单,提升导航栏的用户体验。 - 弹出窗口:JavaScript创建的模态对话框,常用于显示详细信息或用户确认操作。 - 表单验证:使用JavaScript对用户输入的数据进行实时...
4. 实现表情选择界面,可以是下拉菜单、弹出层或者浮动面板。 5. 处理用户的选择,将选中的表情插入到目标位置。 6. 对于魔法表情,可能还需要处理额外的交互逻辑,如动画播放和事件监听。 总之,这个JS表情库提供...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...
- 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...
6. **丰富的UI组件**:除了基础的jQuery插件,DWZ还提供了一系列自定义的UI组件,如表单验证、下拉菜单、弹出层、分页等,这些组件在提升用户体验方面发挥了重要作用。 7. **开发文档**:压缩包中的"dwz-user-guide...
2. **UI组件**:包括导航条(Navbar)、下拉菜单(Dropdown)、模态框(Modal)、轮播图(Carousel)、按钮组(Button Group)、表单元素(Form Elements)、提示信息(Tooltips)和弹出层(Popovers)等,这些都是...
2. **丰富的UI组件**:包括表格、表单、弹出层、对话框、树形结构、分页、下拉菜单、按钮、提示等,覆盖了日常开发中的各种界面元素。 3. **Ajax无刷新交互**:通过Ajax技术,实现页面的局部刷新,提高用户交互体验...
5. **UI组件**:DWZJS内含一系列丰富的UI组件,如按钮、下拉菜单、日期选择器、分页、对话框、弹出层等,这些组件样式统一,易于使用,能快速提升网页的视觉效果和交互性。 6. **Ajax操作**:DWZJS对Ajax进行了封装...
除了上述组件,BJUI还包含弹出层(Modal)、提示(Tips)、分页(Pager)、时间选择器(DatePicker)等多种常用组件,覆盖了日常开发中的大多数需求。 7. **主题定制** BJUI允许开发者自定义主题,通过调整CSS...
8.[纠正]纠正部分浏览器后台列表管理的多选处理按钮和下拉菜单失效的BUG 9.[改变]后台兼容模式提升到IE8模式 10.修复其他诸多小细节 2013年07月19日 V2.74更新包 1.[新增]后台引导页加入非IE浏览器提示,后台部分...