现在位置首页 / 项目实战 /正文

IE6下解决下拉框覆盖浮动层、Dialog的问题---使用jquery.bgiframe.js插件

作者: IT小兵 | 2014年3月8日| 热度:℃ | 评论: |参与:

虽然说IE6现在已经被淘汰了,但是很多比较旧的机器还是ie6,还是xp。

所以,开发一些管理系统的时候,还得考虑到xp 下的ie6问题。

如果我们做的网页上有下拉框、Div浮动层、 Dialog之类的,会看到下拉选框总是把浮动区块div覆盖划破,

而我尝试使用z-index属性也未能解决,但我们可以使用bgiframe 插件解决IE6 的这个bug。

好好的Jquery-DiaLog在有下拉框的页面显示的是这个鸟样。

首先去jquery 官方网下载 jquery.bgiframe.js ,然后在页面引入插件:

官方地址:https://github.com/brandonaaron/bgiframe


<script type="text/javascript" src="jquery.bgiframe.js"></script>

然后对浮动层或者Dialog进行设置

<script type="text/javascript">
       $(function() {
           $('#DivLay').bgiframe();       //DivLay为浮动Div层的ID
        });
</SCRIPT>
或者,如果你使用的是Jquery的Dialog,可以利用Dialog的属性达到这个目的。
 $(document).ready(function(){
   $('#dialog').dialog({
      height:600,
      width: 900,
      bgiframe: true         //解决下拉框遮盖div的bug
  });
 });


有图有真相:现在Dialog已经在IE6中完全覆盖下拉框了

附带插件源码:保存为js文件即可!


/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Version 2.1.3-pre
*/
(function($){
$.fn.bgiframe = ($.browser.msie && /msie 6.0/i.test(navigator.userAgent) ? function(s) {
s = $.extend({
top     : 'auto', // auto == .currentStyle.borderTopWidth
left    : 'auto', // auto == .currentStyle.borderLeftWidth
width   : 'auto', // auto == offsetWidth
height  : 'auto', // auto == offsetHeight
opacity : true,
src     : 'javascript:false;'
}, s);
var html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
'style="display:block;position:absolute;z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity='0');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+'px')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+'px')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+'px')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+'px')':prop(s.height))+';'+
'"/>';
return this.each(function() {
if ( $(this).children('iframe.bgiframe').length === 0 )
this.insertBefore( document.createElement(html), this.firstChild );
});
} : function() { return this; });
// old alias
$.fn.bgIframe = $.fn.bgiframe;
function prop(n) {
return n && n.constructor === Number ? n + 'px' : n;
}
})(jQuery);


转发注明:IT分享

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询