不会被select挡住的层

2 篇文章 0 订阅
在IE6下,网页中的层是无法挡住select控件的。无论这个层的z-index有多大。出现这种问题的典型案例就是在网页中使用层来作为对话框而不是简单的alert。当使用层来作为对话框时,通常代码像这样:
  1. <div>
  2.   <div style="position:absolute;z-index:101;left:200px;top:200px;">
  3.     <div id="title">title</div>
  4.     <div id="content">content</div>
  5.   </div>
  6.   <div id="dBG" style="position:absolute;z-index:100;left:0px;top:0px;width:100%;height:100%"></div>
  7. </div>
id=dBG的是一个背景层,其中的width和height的值最好是用文档的innerWidth和innerHeight值来代替。

在IE6下,如果这个层下面有select控件,是无法挡住这个select的。解决的办法是添加一个iframe,因为iframe可以挡住select及其它控件。这个iframe看起来像这样:
  1.  <div>
  2.    <div id="content"  style="position:absolute;z-index:102;left:200px;top:200px;">
  3.      <div id="title">title</div>
  4.      <div id="msg">content</div>
  5.    </div>
  6.    <div id="dBG" style="position:absolute;z-index:100;left:0px;top:0px;width:100%;height:100%"></div>
  7. <iframe frameborder="0" scrolling="no" style="position: absolute; z-index: 101; display: block; top: 200px;left:200px;height:144px;width:400px;" vspace="0" hspace="0" marginwidth="0" marginheight="0"/>
  8.  </div>
iframe中的left和top要和显示内容的id=content的层的left和top相同,因为只要挡住这些内容就够了。另外注意z-index,刚好在背景层的上面,内容层的下面,正好起到挡住其它控件的作用。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值