[color=blue]经典实现DIV在Select控件上面（利用IFRAME）[/color]
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br/>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
分享到：
相关推荐
总结来说，面对IE6中的`div`层被`select`控件遮住的问题，我们可以利用`iframe`作为遮罩，并通过设置`z-index`和动态调整`iframe`尺寸的方法来解决。虽然这个方法在现代浏览器中可能不再适用，但对于仍然需要支持IE6...
bgiframe插件会在被遮挡的元素上创建一个背景iframe，通过这种方式，即使在select控件存在的情况下，也能保持元素的可见性。 "postition"标签暗示了问题的核心在于元素的位置布局。在CSS中，position属性用于设置...
/** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...
### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中，有时我们需要对浏览器原生的`<select>`元素进行定制化处理，比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...
在传统的布局中，为了解决div被select遮挡的问题，可能会将div的内容放入iframe或者object元素中。这样做的好处是iframe或object自身通常能够覆盖页面上的其他元素，包括select。然而，这样做也有其缺点，比如可能会...
但是IE6有一个神奇的逻辑，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以解决办法就是用Z轴高度更高的Iframe元素，包裹或覆盖住下拉列表框控件，使其回到正常的Z轴高度上来！...
### 使用iframe作为日历的载体，不再被select和flash等控件挡住的日期输入框 在Web开发领域，用户界面的交互性和功能性是至关重要的。本文将深入探讨如何利用iframe（Inline Frame）来承载日历插件，解决常见的UI...
在这个场景中，我们将讨论如何将 jQuery UI 的 tabs 与 iframe 结合使用，以便在各个 tab 内部实现页面的跳转和内容加载。 首先，我们看到代码示例中创建了一个包含两个 tab 的结构。每个 tab 的内容都是一个 ...
在上面的代码中，我们使用了一个iframe元素作为div元素的底层，并将select元素放在div元素的下方。这样，当我们选择select元素时，select元素不会挡住div元素的内容。 需要注意的是，这个方法可以解决div元素被...
对于纯JavaScript实现，主要挑战在于处理`select`控件，因为它们无法被普通的`div`遮罩层覆盖。为了解决这个问题，我们可以选择在弹出窗口下方添加一个`iframe`来覆盖`select`，或者在弹出窗口出现时临时隐藏`select...
ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有JavaScript，没有... -在Page_Load中设置了哪些需要在AJAX中更新的Asp.net控件会在回发时保持状态，可以...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题，这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid，其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
在随手记的div+css小抄代码中，首先对页面的基本样式进行了设置，包括清除默认边距、列表样式以及图片边框等。这部分内容非常重要，能够确保网页布局的一致性和美观性。 1. **全局样式清除：** - `body{padding:0;...
在IE5.5及更高版本中，`iframe`开始支持`z-index`，但在更早的版本中，`iframe`被视为窗口控件，因此会忽略`z-index`属性。 `z-index`的工作原理涉及到一个叫做"stacking context"的概念。每个定位元素都在一个栈中...
1. 在弹出窗口下方添加一个`iframe`层，用以覆盖`select`控件。 2. 在弹出窗口时，临时隐藏`select`控件，关闭窗口时再恢复显示。 本实例中选择了第二种方法，通过JavaScript函数`DispalySelect(0)`和`...
在这个实例中，我们将探讨如何利用JavaScript来实现一个跨frame的三级联动下拉选项。这个实例主要涉及HTML、CSS和JavaScript技术，旨在考察学生对于frame、浏览器对象、表单控件的理解，以及JavaScript事件处理和...
常用于用户输入数据，与`<input>`（不同类型的输入控件，如文本框、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）和`<button>`（按钮）等配合使用，实现交互功能。 在学习HTML时，...
- **技巧描述**：通过在`<noscript>`标签中添加`<iframe>`元素，并指向一个不存在的页面，从而防止用户使用“另存为”功能保存网页。 - **实现代码**： ```html <iframe src="*.html"></iframe> ``` #### 九...