使DIV不被select等控件遮挡的解决办法

     在IE中,select属于window类型控件,它会“挡住”所有非window类型控件
可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,
他们被渲染在客户区的绘画表面上,
而select是使用的标准windows控件,只是作为客户区的子控件放置而已,
它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件,
比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。

有4种办法;
1. 修改select,不用标准select,而是自己用其他html元素模拟
2.
修改你的div,使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4.
在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。

第4种方法的例子:

<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>

时间: 2024-10-28 15:56:58

使DIV不被select等控件遮挡的解决办法的相关文章

Win8系统无法打开网页提示”浏览器控件不兼容“解决办法

  Win8系统无法打开网页提示"浏览器控件不兼容"解决办法: 1.进入Win8系统,然后,使用鼠标双击要浏览的图标即可将浏览器打开; 2.在Win8系统窗口右上角处,点击工具按钮,再选择"Internet选项",接着在窗口上点击高级选项卡; 3.在Win8系统窗口高级选项卡下,点击"启动增强保护模式",然后使用鼠标将选英方框内的勾取消掉,并在窗口右下角点击"确定"按钮保存,即可解决浏览器无法显示故障; 4.返回Win8系统浏

验证控件进行分组解决办法

大概实现过程如下: 1,给验证控件添加属性:ValidationGroup="vgA"(组名随便写) 2,修改保存按钮的属性:CausesValidation=false 3, 给保存按钮添加OnClientClick= ValidateByGruop()   代码如下:      function  ValidateByGruop ()     {      var retval=false ;      var val = $('#<%=下拉列表控件ID.ClientID %

用DIV制作即时提示层 防止被select控件遮挡的方法

网上有很多解决关于防止层被select控件遮挡文章,前面我也用了一个比较简单的方法,最简单的方法解决div被select遮挡的问题,可是这个方法只使用IE,对其他浏览器有些问题,所以又用iframe的方法做了一个样例,如下: 样例代码下载:点击下载

WML教程9:Select List 控件

select|教程|控件 对表单的控制能力可以证明一个HTML设计者是否够专业,而且很多交互功能也必须依赖表单.WML没有表单属性,但是WML可以直接使用控件,同样可以达到使用表单的效果.因此,使用控件的水平可以体现一个WML设计者的制作水平. WML控件有Select List和Input Box两个系列,每个系列另外包含几个子系列,基本可以满足表单设计的需求. 选择列表控件(Select List) Select有两对很重要也很容易混淆的属性:name, value , iname , iv

在mfc中使用CSplitterWnd分割窗口问题,想要拖动分隔条怎么使小窗口的大小和控件随着变化

问题描述 在mfc中使用CSplitterWnd分割窗口问题,想要拖动分隔条怎么使小窗口的大小和控件随着变化 如上所述,我现在已经把一个界面分割成2行3列的6个小窗口,用来显示曲线图.但是,当我拖动分隔条的时候主要查看某一个小窗口的时候,里面的控件和位置都没有变化,现在怎么才能使其窗口和里面的控件随着我的拖动放大缩小呢..求救啊!!!谢谢啦!! 解决方案 处理View中的WM_SIZE消息等,然后再等比例的MoveWindow等来调整控件的大小位置

ios-IOS模拟器不显示控件该如何解决

问题描述 IOS模拟器不显示控件该如何解决 新手ios开发,用的是xcode 6.3.2,添加了一个textField和一个lable,模拟器上一个都没显示.该怎么解决?网上有人说添加window,弄了好久也没成功,望小伙伴们留下解决办法.谢谢 解决方案 在程序运行的时候,点图中的那个按钮,调试视图,你看看你添加的控件添加在什么位置上了. 解决方案二: 你是直接拖的控件还是用代码创建的呢?用代码创建的需要addSubView,托控件的话,在右边设置下text属性,控件可能是透明的. 解决方案三:

asp.net RadComboBox控件 乱码的解决方法

asp教程.net radcombobox控件 乱码的解决方法 一般存在这样两个解决方案: 1.   在web.config里面增加 <globalization   fileencoding= "utf-8 "   requestencoding= "utf-8 "   responseencoding= "utf-8 "   culture= "zh-cn "/> 2.   在后台代码里面对乱码进行decode

Silverlight使用时,从工具箱拖拉控件到设计窗体时,抛出异常,System.NullReferenceException 未将对象引用设置到对象的实例。

问题描述 System.NullReferenceException未将对象引用设置到对象的实例.在Microsoft.Windows.Design.Platform.SilverlightMetadataContext.SilverlightXamlExtensionImplementations.<GetXmlNamespaceCompatibilityMappings>d__8.MoveNext()在MS.Internal.Design.Metadata.ReflectionProjec

即使把主窗体控件modifiers属性改为protected C#中子窗体依然无法调用主窗体控件 要怎么解决啊?急求答案 以下是代码。

问题描述 stringselectsql="select*from用户权限wheresysuser='"+username+"'andpassword='"+password+"'";SqlCommandcmd=newSqlCommand(selectsql,LinkDataBase.Connection);cmd.CommandType=CommandType.Text;SqlDataReadersdr;sdr=cmd.ExecuteReade