交流经验：22
总积分：122
级别：普通会员
注册时间: 2011-11-03
文章: 13
离线

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

最近在解决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(); ); 到此，这个问题终于算是解决啦！

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

推广链接

精品视频课程推荐

jquery使用基础-独家视频教程
独立使用jQuery简化js开发

深入浅出学Spring Web MVC视频教程
系统、完整的学习Spring Web MVC开发的知识。包括：Spring Web MVC入门；理解DispatcherServlet；注解式控制器开发详解；数据类型转换；数据格式化；数据验证； 拦截器；对Ajax的支持；文件上传下载；表单标签等内容；最后以一个综合的CRUD带翻页的应用示例来综合所学的知识

Java Web开发理论部分视频教程
系统掌握开发实际的Java Web应用所需的理论知识和技能(Servlet、Jsp、JavaBean、TagLib、EL、JSTL、MVC模式、连接池DataSource、JNDI等知识)。涉及项目：在线投票计数、在线人数统计、登录检查、购物车、商品管理、非法字符替换等多个随堂演示小应用。

Spring3开发实战-独家视频教程
从零到精通Spring3的开发知识；IoC/DI的思想、IoC/DI的运行流程、IoC/DI的开发指导、AOP的思想、AOP的运行流程、AOP应用的设计、Spring对JDBC和Hibernate的支持、Spring的事务、SSH的集成应用