与<rich:modalPanel />的战斗

最新推荐文章于 2019-05-14 17:05:10 发布

exceedsun218

最新推荐文章于 2019-05-14 17:05:10 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏： JSF 文章标签： jQuery CSS 浏览器 IE UI ViewUI

本文链接：https://blog.youkuaiyun.com/exceedsun218/article/details/83330258

JSF 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种解决Rich ModalPanel控件在不同浏览器环境下显示问题的方法。通过调整CSS样式及特定IE6的JavaScript代码，实现了当弹出层高度超过浏览器窗口时的适配方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

[b][color=blue]IE6以外的浏览器[/color][/b]解决方案很简单只要设置一段CSS样式即可


.rich-mpnl_panel {
    position: absolute;
}

但[b][color=blue]IE6[/color][/b]还不行需要多费些事
查看源代码得知由于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>

完毕... :arrow: