CSS修改对话框样式

编辑
文档创建者:gxy120313 (61073 )     浏览次数:2924次     编辑次数:6次     最近更新:jiangsr 于 2018-05-28     

目录:

1. 描述编辑

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

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

效果如下:

222

2. 思路编辑

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

3. 操作步骤编辑

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

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

222

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);

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

222
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端预览效果

222

4.2 移动端效果

注:不支持移动端。

5. 已完成模板编辑

模板效果在线查看请点击:CSS修改对话框样式.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\CSS样式\01-CSS修改对话框样式.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗?