我们在作B/S开发的时候经常会遇到DIV层被下拉框遮挡的时候,这让我们很苦恼。无论我们怎么设置css样式都无济于事,因为selese元素的优先级要不div高。那么我们就要选用比select元素优先级还要高的元素来遮挡它。这时候我们想到了iframe。我们可以在div里加上iframe来实现这种效果。
其实网上有很多类似的代码。但是iframe的大小设置是个问题,要做到和div的大小一样比较困难,这里展示一点小技巧。
就是用parentNode。具体的代码如下:
xml 代码
- <div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
- <table>
- <tr><td>选项一</td></tr>
- <tr><td>选项二</td></tr>
- <tr><td>选项三</td></tr>
- <tr><td>选项四</td></tr>
- <tr><td>选项五</td></tr>
- </table>
- <iframe src="" frameborder="0" style="position:absolute; visibility:inherit; top:0px; left:0px; width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight); z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
-
- </div>
- <a href="#" onclick="document.getElementById('menu').style.visibility='visible'">菜单</a>
我们可以看到在设置style 的时候width:expression(this.parentNode.offsetWidth);表达式的方式。this.parentNode.offsetWidth就代表div的宽度
分享到:
- 2007-06-07 11:19
- 浏览 2599
- 评论(2)
- 论坛回复 / 浏览 (1 / 4691)
- 查看更多
相关推荐
使用jquery做的div下拉框,下拉列表。
selectBox下拉框模拟,有多种样式,可以自己定义修改样式
div+css做的下拉框
jQuery+div+css模拟select自定义下拉列表框,简单轻巧实用。
自己编写的一个jquery多选checkbox下拉框,已经封装好了,直接调用就可以
自己这些天写的一点小东西 用JQuery JS 创建一个模拟下拉框。有单选和多选的。自我感觉还是做的过得去,支持IE和FF其他浏览器没试过
jquery DIV模拟select,样式美观、大方、可自己更换背景、不懂的私我
可定制jquery写的div下拉框, 下拉内容可定制 代码短,样式也可自定制
NULL 博文链接:https://xiaoyi3317.iteye.com/blog/732072
下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化
可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...
在下拉框里面绑定树形显示 1、递归绑定 2、树形显示下拉框列表
能够在下拉框写内容的js能够在下拉框写内容的js能够在下拉框写内容的js能够在下拉框写内容的js能够在下拉框写内容的js
div+css打造select下拉菜单,可自己修改相应样式!!!
自己写了一个貌似面向对象的多选下拉框(js+DIV),大家可以自己扩展!
js多选下拉框多选下拉框多选下拉框js多选下拉框多选下拉框多选下拉框
用DIV+CSS封装的一个下拉框控件,效果不错
模仿google下拉框模仿google下拉框模仿google下拉框
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框