与<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>

完毕...

评论

6 楼 xiaojianbo 2012-02-17  

5 楼 ye无痕 2010-12-29  

本本好棒

4 楼 打倒小日本 2010-12-04  

依舟cxj 写道

呵呵……在这儿碰到本本你了

呵呵 巧了
欢迎光临 虽说N就没更新过博客了

3 楼 依舟cxj 2010-11-26  

呵呵……在这儿碰到本本你了

2 楼 打倒小日本 2010-08-19  

这段CSS对IE8也是生效的 我们之前一直在用

不过后来由于一些原因 放弃使用modalPanel了
改用Jquery UI的Dialog控件了

1 楼 haokaidehao 2010-08-19  

你好，我想问一下，我用的是IE8， 采用你上面说的针对IE7的CSS，为什么没预期的效果。我弹出的ModalPanel比较大，页面显示不全。你的那个CSS可以解决吗？谢谢。