解决IE6浏览器中Div层挡不住Select组件
2012-11-07 15:33
267 查看
1、依赖组件:依赖于Jquery的核心组件jquery.js。
2、解决的问题:解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)。如果需要源代码请下载附件。
3、使用方法:(1)、在要使用的页面(.jsp或者.html)中首先导入Jquery的核心组件库jquery.js。(如果不使用Jquery
组件,你必须修改js文件中的部分代码:
1、获取浏览器类型和版本号的代码$.browser.msie && $.browser.version=='6.0'
2、在指定id的容器中追加html代码:$("#"+parentDivId).append(iframeHtml);
3、从html文档中移除指定id的html组件:$("#iframeDivUsedForCoverSelect").remove();
如果你对html的文档模型比较熟悉,修改以上代码应该不是很困难)。
(2)、导入该js文件中的两个方法。
注意:1、在层弹出之前调用方法:openIframeDiv(parentDivId);(parentDivId为select组件所在的容器div的id)
2、在关闭弹出的层之后调用方法:removeIframe();
/**
* 通过使用Ifram,解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)
*
* @Author JiangShui
*
* @Date 2010-10-19
*/
/**
* 如果当前的浏览器是IE6,则打开一个iframe层,用于遮挡select组件,
* 本组件用于解决IE6中,div层挡不住select组件的bug
*
* @param parentDivId iframe所依赖的父窗口div层的id,要遮挡的select组件
* 便在该div中(如果select组件不在一个div中,请放入一个div中
* 并定义一个id作为该参数的值)
*
*/
function openIframeDiv(parentDivId) {
if($.browser.msie && $.browser.version=='6.0'){
var iframeHtml = '<iframe id="iframeDivUsedForCoverSelect" scrolling="auto" width="100%" height="100%" '
+ 'frameborder="0" framespacing="0" style="filter:alpha(opacity:0);'
+ 'opacity:0;left:0px;top:0px;position:absolute;z-index:1;"></iframe>';
$("#"+parentDivId).append(iframeHtml);
}
}
/**
* 移除iframe层,与方法openIframeDiv(parentDivId)配对使用
*
*
*/
function removeIframe() {
//获取以前的查询窗口对象
var searchObj = document.getElementById("iframeDivUsedForCoverSelect");
//如果对应id的组件已经存在则将其删除
if (null != searchObj && typeof(searchObj) != "undefined") {
$("#iframeDivUsedForCoverSelect").remove();
}
}
附件下载:deal.zip (986 Bytes)
2、解决的问题:解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)。如果需要源代码请下载附件。
3、使用方法:(1)、在要使用的页面(.jsp或者.html)中首先导入Jquery的核心组件库jquery.js。(如果不使用Jquery
组件,你必须修改js文件中的部分代码:
1、获取浏览器类型和版本号的代码$.browser.msie && $.browser.version=='6.0'
2、在指定id的容器中追加html代码:$("#"+parentDivId).append(iframeHtml);
3、从html文档中移除指定id的html组件:$("#iframeDivUsedForCoverSelect").remove();
如果你对html的文档模型比较熟悉,修改以上代码应该不是很困难)。
(2)、导入该js文件中的两个方法。
注意:1、在层弹出之前调用方法:openIframeDiv(parentDivId);(parentDivId为select组件所在的容器div的id)
2、在关闭弹出的层之后调用方法:removeIframe();
/**
* 通过使用Ifram,解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)
*
* @Author JiangShui
*
* @Date 2010-10-19
*/
/**
* 如果当前的浏览器是IE6,则打开一个iframe层,用于遮挡select组件,
* 本组件用于解决IE6中,div层挡不住select组件的bug
*
* @param parentDivId iframe所依赖的父窗口div层的id,要遮挡的select组件
* 便在该div中(如果select组件不在一个div中,请放入一个div中
* 并定义一个id作为该参数的值)
*
*/
function openIframeDiv(parentDivId) {
if($.browser.msie && $.browser.version=='6.0'){
var iframeHtml = '<iframe id="iframeDivUsedForCoverSelect" scrolling="auto" width="100%" height="100%" '
+ 'frameborder="0" framespacing="0" style="filter:alpha(opacity:0);'
+ 'opacity:0;left:0px;top:0px;position:absolute;z-index:1;"></iframe>';
$("#"+parentDivId).append(iframeHtml);
}
}
/**
* 移除iframe层,与方法openIframeDiv(parentDivId)配对使用
*
*
*/
function removeIframe() {
//获取以前的查询窗口对象
var searchObj = document.getElementById("iframeDivUsedForCoverSelect");
//如果对应id的组件已经存在则将其删除
if (null != searchObj && typeof(searchObj) != "undefined") {
$("#iframeDivUsedForCoverSelect").remove();
}
}
附件下载:deal.zip (986 Bytes)
相关文章推荐
- 解决IE6中select组件不受css(z-index)的控制
- (转)IE6,IE7,FF等浏览器不兼容原因及解决办法
- IE6浏览器中window.location.href无效的解决方法
- 解决IE6浏览器下position:fixed固定定位问题
- jQuery bgiframe插件解决IE6 中 Select穿透div等层的问题
- IE6浏览器的bug问题及相关解决的方法
- IE6下Select元素被div等元素覆盖的解决办法
- 解决IE6下Select不能隐藏的问题
- 完美解决该死的ie6下select总是置于最上层bug
- IE6 Select元素无法被div等元素覆盖的bug解决办法
- 兼容IE6,IE7,火狐Firefox多款浏览器的日期(日历)选择器特效,不会被SELECT挡住
- 解决IE6下select显示在弹出框上问题
- 解决手机浏览器和微信中select中border:none;无用和去掉小三角
- 安卓系统浏览器中select下拉按钮无法弹出选择面板奇怪问题解决
- 关于js在ie6中运行错误,在其他浏览器运行正常的解决方法
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- 解决IE6 select无法被div遮盖的bug
- DIV层在IE6下被下拉框遮挡的解决方法
- IE6下div层被select控件遮住的问题解决方法
- 解决IE6浏览器下position:fixed固定定位不抖动的问题