最近项目中要用到DIV浮动层效果，但是却遇到DIV在IE下被下拉列表select穿透的问题。Google了一把，找到了两个jQuery插件。先来介绍一下JavaEye网友freeway2000的jquery.contextbox插件。他在《用jQuery动手写一个插件：实现一个下拉框效果》中也有详细介绍，不过我还是自己动手写了一下。
示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery.contextbox示例</title>
<style type="text/css">
div.contextbox {border:2px solid black;background:gray;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugin/jquery.contextbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showMore0').each(function(){
var contentHtml = $('#more0').html();
$(this).createContextBox(
{"offsetX":5,"offsetY":-5,"eventName":"click","width":200,"content":$("<div/>").html(contentHtml)}
);
});
$('#btnClose0').click(function(){
$('#showMore0').hideContextBox();
});
});
</script>
</head>
<body>
<br/>
<li>防select穿透</li>
<hr/>
<span id="showMore0">测试</span>
<div id="more0" style="display:none;POSITION:absolute;Z-INDEX:1000;width:200px;">
<div>
<A style="CURSOR: hand" id="btnClose0" style="float:right;">［关闭］</a><br/>
效果不错吧!
</div>
</div>
<br/>
<select></select>
</body>
</html>
用法很简单，大家试试吧。附件是所需要的js文件以及html页面。
运行之后的效果如下：
分享到：
相关推荐
标题"解决DIV在IE下被下拉列表select穿透的问题(二)"所提及的，是一个典型的IE浏览器特有的问题。这个问题涉及到HTML中的`<div>`元素和`<select>`下拉列表之间的交互，具体表现为在Internet Explorer（特别是旧版本...
在互联网的早期，Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器，但它的兼容性和渲染机制存在诸多问题，其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现，但在IE6中，`...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
在网页设计中，`<select>`元素和其子元素`<option>`经常被用来创建下拉列表，供用户选择。然而，在某些情况下，特别是在固定宽度的`<select>`元素中，如果`<option>`的内容过长，可能会导致内容显示不全，只显示部分...
在网页设计中，有时我们可能需要使用自定义的下拉列表来替代HTML原生的`<select>`元素，以实现更复杂或者更具设计感的交互效果。这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript（通常...
"解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子，它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中，我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序，从而让某些元素...
### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中，有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的，尤其是`z-index`值的设置不...
在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先，`demo.html`是演示页面，它展示了如何在实际项目中应用这个插件。这个页面会包含一...
在IE6中，Select元素具有“下拉菜单”的特性，它会被渲染在页面的最顶层，即使它在HTML结构中位于其他元素（如Div）之下。这种行为是由于IE6对CSS层叠上下文理解的局限性，以及对z-index属性的不完全支持导致的。 ...
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...
1. **响应式设计**：确保下拉列表在不同屏幕尺寸下也能正常工作，可能需要使用媒体查询（`@media`）进行调整。 2. **访问性和键盘导航**：为无障碍性（accessibility）考虑，确保用户可以通过键盘操作（如Tab键）来...
标题 "DIV在IE6中被下拉菜单占据的问题" 指涉的是一个经典而棘手的前端开发问题，尤其在处理Internet Explorer 6（简称IE6）浏览器时。这个问题通常发生在使用CSS（层叠样式表）布局时，特别是涉及到浮动元素、定位...
在网页设计中，`<select>`元素通常用于创建下拉列表，用户可以在其中选择一个或多个选项。然而，标准的`<select>`元素通常只支持文本内容，不直接支持显示图片。但随着网页交互性的增强，设计师们有时需要在下拉列表...
在本案例中，"解决div总是被select遮挡的问题.rar"提供了解决方案，通过引入一个透明的`iframe`来规避这一现象。 首先，我们需要理解Z轴顺序的概念。在CSS中，`z-index`属性用于指定元素在堆叠上下文中的层级。具有...
标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题：当在网页上使用select下拉框时，它会覆盖在其他使用绝对或相对定位的元素（如div）之上，导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...
本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框，实现下拉列表的功能。 首先，理解jQuery的核心概念。jQuery通过选择器选中DOM元素，然后对这些元素进行操作。例如，`$("#myDiv")`会选中ID为"myDiv"的...
在网页设计中，`div+css`是一种常见的布局方式，用于构建页面的结构和样式，而`select`控件则是HTML中的一个基本元素，用于创建下拉列表供用户选择。在本项目中，“美漂亮的实用div+css模仿select下拉控件”是一个...
第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好...