CSS 修改对话框样式

1. 描述

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

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

效果如下：

2. 思路

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

3. 操作步骤

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

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

JS 代码如下：

1. //FR.Msg.alert("<font color=black size=3 face='microsoft yahei'>提示</font>", "<font color=red size=2 face='microsoft yahei'>填报成功！</font>");
   
2. FR.Msg.alert("提示", "填报成功！");
   
3. $('#popup_title').css('color', 'black');
   
4. $('#popup_title').css('font-size', '17px');
   
5. $('#popup_title').css('font-family', 'microsoft yahei');
   
6. $('#popup_message').css('color', 'red');
   
7. $('#popup_message').css('font-size', '17px');
   
8. $('#popup_message').css('font-family', 'microsoft yahei');
   
9. $('#popup_container').css('min-width', '100px');
   
10. $('#popup_container').width(100);
    
11. $('#popup_container').height(100);
    
12. $('#popup_header').width(100);

复制代码

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

JS 代码如下：

1. var old = FR.Msg.toast;
   
2. FR.Msg.toast = function(x) {
   
3.     if(x == "成功") {
   
4.         FR.Msg.alert("<font color=black size=3 face='microsoft yahei'>提示</font>", "<font color=red size=3 face='microsoft yahei'>填报成功！</font>");
   
5.         $('#popup_container').css('min-width', '100px');
   
6.         $('#popup_container').width(100);
   
7.         $('#popup_container').height(100);
   
8.         $('#popup_header').width(100);
   
9.     } else {
   
10.         old(x);
    
11.     }
    
12. }

复制代码

4. 预览效果4.1 PC 端预览效果

4.2 移动端效果

注：不支持移动端。

5. 已完成模板

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

点击下载模板：01-CSS修改对话框样式.cpt

能不能根据点击位置 修改弹窗显示位置？