jQuery-dialog在ie6下被下拉框(select)覆盖问题

wellyc 发布于 2013/02/22 14:06
阅读 1K+
收藏 3

最近在解决jQuery在ie6下的兼容性时,发现一个问题,在此与大家分享,并希望大家给予宝贵的建议

问题如下:

在ie6下使用jQuery的dialog弹出框时,若不引入jquery.bgiframe.js时,会出现下拉框(select)无法被弹出的div覆盖的问题,如下图:

点击test按钮弹出dialog框,可以看到上图红框(属于dialog)部分被下拉框遮盖住了。

加载了jquery.bgiframe.js之后,如图:

问题解决了。

解决原理:假设你的dialog代码为

<div id="message_dialog" style="display:none; text-align:center;">
    This is a test...
</div>
jquery.bgiframe.js的原理为在你的div中加入一个与你的div一样大小iframe,由于ie6下iframe可以覆盖select,div可以覆盖iframe,这样就间接解决了div无法覆盖select的问题。

看到这里,你以为结束了?不,还没有,jquery的dialog有一个modal属性,用于禁用dialog下面的控件,假如你的dialog将这个属性设置为true,如

$('#test').click(function(){
    $('#message_dialog').dialog({
        title:'Test',
	modal:true,
	open:function(){}
    })
});
那么,你会看到如下情况:

看见没有,下拉框全都不见啦!!!这又是为啥呢?仔细查过后发现,由于modal的原理是加一个与body同样大小被禁用的div层,由于引入了jquery.bgiframe.js,这个div层中也加入了一个等大的iframe,因为iframe覆盖select,所以下拉框就看不到了....

那么,手动去掉这个iframe如何?下面看效果

$('#test').click(function(){
    $('#message_dialog').dialog({
        title:'Test',
	modal:true,
	open:function(){}
    });
    $(".ui-widget-overlay iframe").remove();
});

出来啦!有木有!有木有!不过为啥select可以点击呢?为啥没被禁用呢?因为禁用的那个div去掉iframe之后虽然不会覆盖下拉框,但是div不能覆盖select啊!有木有!自然禁用的div就无法覆盖下拉框,下拉框就能点击了。不过没关系,又想出一招,把select手动禁用如何?

$('#test').click(function(){
    $('#message_dialog').dialog({
        title:'Test',
	modal:true,
	open:function(){}
    });
    $("select").attr("disabled","disabled");
    $(".ui-widget-overlay iframe").remove();
});

看到这,你又以为搞定了吧!不,还木有!!假如你这个dialog支持关闭呢?那么关闭之后页面上的select不是依然被禁用了么?所以,你还需要对dialog的close做处理

$('#test').click(function(){
    $('#message_dialog').dialog({
	title:'Test',
	modal:true,
	pen:function(){},
	close:function(){
            $("select").attr("disabled",false);
	}
    });
    $("select").attr("disabled","disabled");
    $(".ui-widget-overlay iframe").remove();
});
到此,这个问题终于算是解决啦!

不过以上做法都是个人见解,如果有更好做法或者建议的,欢迎至极

加载中
0
mark35
mark35

真是麻烦啊。

现在不考虑对ie6做特别处理,不能用就让客户换FF

0
wellyc
wellyc

引用来自“mark35”的答案

真是麻烦啊。

现在不考虑对ie6做特别处理,不能用就让客户换FF

没办法,现在很多客户虽然不直接用ie6,但用ie6内核浏览器的还是很多的....
0
z
zhongxh
才发现啊……
0
我土鳖

引用来自“wellyc”的答案

引用来自“mark35”的答案

真是麻烦啊。

现在不考虑对ie6做特别处理,不能用就让客户换FF

没办法,现在很多客户虽然不直接用ie6,但用ie6内核浏览器的还是很多的....
IE8总可以吧。
0
iehyou
iehyou
换artdialog
0
wellyc
wellyc

引用来自“zhongxh”的答案

才发现啊……
确实是现在才发现.....主要是最近才在用jquery的dialog,才在ie6下发现了这个问题
0
wellyc
wellyc

引用来自“iehyou”的答案

换artdialog
多谢这位仁兄的建议...
返回顶部
顶部