解决 dropdownlist 覆盖 div 问题


问题的出现

  当你使用一个 div在一些控件所在位置之上显示一些帮助信息时,你也许会遇到控件覆盖 div帮助信息的问题。造成这个问题的原因是页面上的控件没有设置 z-index属性, z-index属性决定元素显示的前后层次,一个 z-index值大的元素永远都处在比它 z-index值小元素的前方。

  Dropdownlist是没有 z-index属性的,他们是窗口级的控件,如果你想把一个 div显示在 Dropdownlist控件上,你就会遇到 dropdownlist覆盖 div问题。下面的图片展示了这个在 IE 6里很普遍的问题。

  查看原图(大图)

  解决方案

  假设在一个 ASPX页面中,你想实现当鼠标移动到某个图片时就显示一个 div。并且你使用一段 JavaScript来实现这个效果,在这一段 JavaScript代码中,你会控制 div显示的位置,如果某个 combo box 后者 list box 正好在这个地方,用户就会看到这些控件挡住了 div的内容。

  对这个问题有很多解决方案,我使用了最简单的一种。这个解决方案就是在 div显示的地方完全重合的显示一个和 div一样大小的 iframe。

  查看原图(大图)

  你可以很容易的控制这个 iframe的大小,因为 div的高和宽都是已知的。

  代码

  在页面的顶部放一个 iframe:

< iframewidth="0" scrolling="no"height="0"
frameborder ="0" class="iballoonstyle" id="iframetop">
</ iframe >

  使用 JavaScript在你想要显示 div的地方同时显示这个 iframe:

var layer = document.getElementById(divTip.id);
layer.style.display = 'block';
var iframe = document.getElementById('iframetop');
iframe.style.display = 'block';
iframe.style.width = layer.offsetWidth-5;
iframe.style.height = layer.offsetHeight-5;
iframe.style.left = layer.offsetLeft;
iframe.style.top = layer.offsetTop;

  在上面的 JavaScript代码中, divTip.id是你要显示 div的 ID值



相关阅读:
Oscdimg 命令行选项使用
CSS的私有属性小结(针对FireFox浏览器)
反垃圾邮件技术解析
js查找父节点的简单方法
vb.net入门——Splitter 控件的使用
asp事务处理
WML,Apache,和 PHP 的介绍
javascript对象与数组参考大全(4)
无刷新的聊天室的制作兼谈组件制作和ClientSide Script(一)
css对边框的属性控制和链接的伪类选择器
Webjx推荐15个好的CSS网格布局生成器
ASP.NET自定义控件 带有自定义样式的星级控件
CSS仿淘宝首页导航条按钮布局效果
CSS实现表格单元格强制换行和强制不换行
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4