与<rich:modalPanel />的战斗

打倒小日本

发自肺腑的说<rich:modalPanel />真是一个不错的弹出层控件
拖动、定位、自动适应大小、手动改变大小 我的需求他都能一一满足

但有些地方也有点人性化过头了 不够灵活
弹出层总是固定(position: fixed)在某个位置上
换句话说 拉动滚动条 弹出层不会跟着上下移动

一般情况下当然没问题 这样也挺好
但当弹出层的高度 > 浏览器的高度后 问题就来了
由于是固定位置 所以超出浏览器的部分就怎么也看不到了
也许控件的作者认为弹出层的内容一定都很短小吧

查看了N遍API 也没发现可以关闭这个"特性"的方法
正规方法的不行 那只能来"硬"的了
过程省略...直接看解决方案吧

IE6以外的浏览器解决方案很简单 只要设置一段CSS样式即可
.rich-mpnl_panel {    position: absolute;}

但IE6还不行 需要多费些事
查看源代码得知由于IE6不支持position: fixed
所以弹出层固定位置 是使用IE专有的CSS表达式来实现的
具体代码为 modalPanel.js 580行左右
var leftExpr = "(this.mpLeft || 0) + -Position.cumulativeOffset(this.parentNode)[0] + getSizeElement().scrollLeft + \"px\"";var topExpr = "(this.mpTop || 0) + -Position.cumulativeOffset(this.parentNode)[1] + getSizeElement().scrollTop + \"px\"";eCdiv.style.setExpression("left", leftExpr);eCdiv.style.setExpression("top", topExpr);
由于不想修改控件代码(这样会对以后的升级照成麻烦)
所以只能动态的删除针对top的CSS表达式
代码如下
function removeModalPanelTopFixedForIE6(obj){    //IE6    if(jQuery.browser.msie && jQuery.browser.version < 7)    {        //ID        var id = obj.id.substring(0, obj.id.indexOf("Container"));        //去除针对IE6高度top的css表达式        jQuery(obj).find("#" + id + "CDiv")[0].style.removeExpression("top");    }}
然后需要修正这个问题时这样调用
<rich:modalPanel onshow="removeModalPanelTopFixedForIE6(this)">    ......</rich:modalPanel>
完毕...