CSS修改对话框样式

编辑
  • 文档创建者:gxy120313
  • 浏览次数:5664次
  • 编辑次数:9次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

    在我们开发的报表中,当用户填报成功后,希望提示一下用户,但是提示内容少的话,默认提示框比较大,会很难看,

    并且提示内容的字体默认都是一个颜色的,这时我们需要用到 CSS 来修改提示框的大小以及提示内容的字体。

    效果如下:



    2. 思路

    给模板添加一个填报成功事件,自定义对话框的大小和提示内容的字体颜色


    3. 操作步骤

    打开一张填报模板,此处以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeFrom\FreeFrom.cpt为例

    点击模板>模板 Web 属性>填报预览设置,选择为该模板单独设置,添加一个填报成功事件,js如下:


    JS 代码如下:

    FR.Msg.alert("<font color=black size=3 face='microsoft yahei'>提示</font>", "<font color=red size=3 face='microsoft yahei'>填报成功!</font>");
    $('#popup_container').css('min-width', '100px');
    $('#popup_container').width(100);
    $('#popup_container').height(100);
    $('#popup_header').width(100);


    如果要隐藏自带的填报成功的提示框,再添加一个加载结束事件:


    JS 代码如下:

    var old = FR.Msg.toast;
    FR.Msg.toast = function(x) {
        if(x == "成功") {
            FR.Msg.alert("<font color=black size=3 face='microsoft yahei'>提示</font>", "<font color=red size=3 face='microsoft yahei'>填报成功!</font>");
            $('#popup_container').css('min-width', '100px');
            $('#popup_container').width(100);
            $('#popup_container').height(100);
            $('#popup_header').width(100);
        } else {
            old(x);
        }
    }


    4. 预览效果

    4.1 PC 端预览效果


    4.2 移动端效果

    注:不支持移动端。


    5. 已完成模板

    模板效果在线查看请点击:CSS 修改对话框样式.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\01-CSS修改对话框样式.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]