`

经典实现DIV在Select控件上面(利用IFRAME)

UP 
阅读更多
[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> 

分享到:
评论
1 楼 elvishehai 2009-04-23  
怎么样让div在iframe的上面了

相关推荐

    解决 Ie 6下 select挡住div的通用函数

    /** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...

    IE6下div层被select控件遮住的问题解决方法

    方法很简单在层里套个iframe &lt;div&gt;能看见我了吗?&lt;iframe frameborder="0" &gt;&lt;/iframe&gt;&lt;/div&gt; 有一个地方需要注意下,需要给iframe的z-index属性设置个负数,比如-1;不然层里的东西就看不见了 如果弹出...

    IE6下Select元素被div等元素覆盖的解决办法

    但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有... -在Page_Load中设置了哪些需要在AJAX中更新的Asp.net控件会在回发时保持状态,可以...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    《程序天下:JavaScript实例自学手册》光盘源码

    6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...

    程序天下:JavaScript实例自学手册

    6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...

    html入门到放弃笔记

    1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 &lt;body&gt; &lt;div&gt; 这是一段测试文本 &lt;/div&gt; &lt;...

    无限菜单之 xml+popup 版(IE5.5+)

    Xml真是好东西,在Web控件中,可以得到灵活的运用(在我的上篇随笔《xml+xsl+htc,web控件开发的理想组合》中,已经简单提到了xml+xsl+htc的理想组合),在这里也不例外,先用Xml来定义好菜单的数据menu.xml: ...

    ActiveX插件的Z-Index属性无效问题解决

    无窗体元素包括大多数html元素(例如div、table等)、无窗体的ActivX插件、iframe等;有窗体的元素包括&lt;Object&gt;元素、ActiveX插件、Plug-ins插件、Select元素等。所有的有窗体元素都会出现在无窗体元素之上,...

    js使用小技巧

    &lt;input type=text name=text1 value="123" onfocus="this.select()"&gt; ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"&gt; 文本框的默认值 (this.defaultValue)"&gt; title换行 obj.title =...

    Html5中文手册(程序员必备手册)

    42、&lt;iframe&gt; 定义行内的子窗口(框架)。 43、&lt;img&gt; 定义图像。 44、&lt;input&gt; 定义输入域。 45、&lt;ins&gt; 定义插入文本。 46、&lt;keygen&gt; 定义生成密钥。 47、&lt;label&gt; 定义表单控件的标注。 48、&lt;legend&gt; 定义 fieldset ...

Global site tag (gtag.js) - Google Analytics