周五快下班的时候,收到一个后台研发提交的一个BUG:某君写的弹出层在IE6下被下拉列表遮挡了。
(左图为:未弹出选择层效果)
由于在IE6中,下拉列表拥有比较高权限,会把除frame外的元件遮挡,这是IE6的一个BUG,在IE7及以上版本已经修复。目前了解到只有两种方法可以解决:
1.自定义下拉列表组件;
2.使用比其更高权限的iframe进行遮挡,然后使iframe置于弹出层的下层。
由于时间紧,所以放弃了方法1。直接使用iframe对下拉列表进行遮挡。首先,跟踪页面(editsinglematterForSSDJ.html)<button id=”showmcBtn” type=”button” false;”><span>选择</span></button>找到触发元素事件:showMatterCategorySelect,在IE8上使用开发工具检索到事件来自editsinglematterForSSDJ.js文件的function showMatterCategorySelect(){ selectMatterCategoryTree.showDropDownTree();}函数,并找到初始化弹出层的initTree()方法:selectMatterCategoryTree.initTree(dropTreeParamObj);
由于不想深入变更弹出层的组件修改,所以直接在树层初始化后,对DOM进行操作,插入iframe使其遮挡下拉列表:$(‘#checkBoxTree_SelectContent’).prepend(“<iframe scrolling=’no’ frameborder=’0′ style=’background-color:transparent;z-index:-1;position:absolute;width:160px;height:100px;’><body></body></iframe>”);因为弹出树层初始化后生成的父级DIV的ID是“checkBoxTree_SelectContent”,所以在其里面插入了iframe并使用绝对定位。
经IE6测试通过,最终结果如下图: