浏览 3875 次
|
锁定老贴子 主题：为什么浮动层不能覆盖住选择列表？
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
最后更新时间：2004-11-11
代码如下：
[code:1] <html> <head> <title> New Document </title> </head> <body> <div style="position:absolute;top:20px;left:20px;z-index:99;width:200px;height:200px;background-color:#cccccc"> </div> <select size="2" style="width:200px;height:100px"> </select> <br/> <input type="text" style="width:200px;height:100px"> </body> </html> [/code:1] 这个问题很奇怪，如果是文本框，浮动层是可以覆盖它的，但选择列表框则不行。 我希望浮动层能盖住选择列表框，不知道该怎么做？ 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
最后更新时间：2004-11-11
[code:1]
function showEleObj() { // showElement("IFRAME"); // showElement("OBJECT"); showElement("SELECT"); } function hideEleObj(menuid) { var ox = parseInt(menuid.style.left); var oy = parseInt(menuid.style.top); var ow = menuid.offsetWidth; var oh = menuid.offsetHeight; // hideElement("IFRAME", ox, oy, ow, oh); // hideElement("OBJECT", ox, oy, ow, oh); hideElement("SELECT", ox, oy, ow, oh); } function showElement(elmID) { for (i = 0; i < document.all.tags(elmID).length; i++) { obj = document.all.tags(elmID)[i]; if (! obj || ! obj.offsetParent) continue; obj.style.visibility = ""; } } function hideElement(elmID, ox, oy, ow, oh) { ox = parseInt(ox); oy = parseInt(oy); ow = parseInt(ow); oh = parseInt(oh); for (i = 0; i < document.all.tags(elmID).length; i++) { obj = document.all.tags(elmID)[i]; if (! obj || ! obj.offsetParent) continue; objLeft = obj.offsetLeft; objTop = obj.offsetTop; objParent = obj.offsetParent; while (objParent.tagName.toUpperCase() != "BODY") { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } if ( (ox > (objLeft+obj.offsetWidth)) || (objLeft > (ox+ow)) || (objTop > (oy+oh)) || (oy>(objTop+obj.offsetHeight)) ) obj.style.visibility = ""; else obj.style.visibility = "hidden"; } } [/code:1] 使用: 显示层的时候调用: hideEleObj(document.all.yourLayer); 关闭层的时候调用: showEleObj(); |
| 返回顶楼 | |
|
最后更新时间：2004-11-12
谢谢楼上两位！
八仙过海，各显神通。 这里也有一个解决方法，用一个空的iframe做底板。 http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx |
| 返回顶楼 | |
|
最后更新时间：2004-11-12
楼主的问题是页面开发中一个很普遍的问题：
select,object对象极其特殊，z-index属性始终高于其他的页面元素，css的层的概念（包括其他css风格的设置）对它们不起作用。select下拉框还可以跑出ie的窗口！ scud的解决办法应该是显示div时隐藏select，隐藏div时显示select，虽然解决了用户操作问题，但对于select比较长的情况，超出div的部分一会儿显示，一会儿隐藏，用户感觉极其不好。 spring嘟嘟的解决办法不错，因为popup是另外一个窗口，不用管z-index属性，即可以遮住所有元素，当然也可以遮住select。 还有一个比较好但麻烦的解决办法是采用bindows那样的自定义的ComboBox，既解决了将div遮挡住了的问题，就解决了css风格问题，可以保持整个页面元素风格的吻合。 |
| 返回顶楼 | |
|
最后更新时间：2004-11-12
jeffrey_he 写道 这里也有一个解决方法，用一个空的iframe做底板。[url]
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx[/url] 这个方法,不错 
|
| 返回顶楼 | |
|
最后更新时间：2004-11-12
jeffrey_he 写道 代码如下：
[code:1] <html> <head> <title> New Document </title> </head> <body> <div style="position:absolute;top:20px;left:20px;z-index:99;width:200px;height:200px;background-color:#cccccc"> </div> <select size="2" style="width:200px;height:100px"> </select> <br/> <input type="text" style="width:200px;height:100px"> </body> </html> [/code:1] 这个问题很奇怪，如果是文本框，浮动层是可以覆盖它的，但选择列表框则不行。 我希望浮动层能盖住选择列表框，不知道该怎么做？ 换掉Select用DHTML重写一个不就得了么 |
| 返回顶楼 | |
|
最后更新时间：2004-11-15
最后我还是自己用div和css做了个select，呵呵。
|
| 返回顶楼 | |
|
最后更新时间：2004-11-18
长啥样？网上不是有很多现成的么？
|
| 返回顶楼 | |
