CSS 修改决策报表弹出框样式

1. 概述
1.1 问题描述

报表开发时，非白色背景的弹出窗口中存在超链接，点击链接到其他报表时，会出现短暂的加载空白，如下图所示，若想去除这个闪烁的空白，该如何实现呢？

1.2 解决方法

引用自定义的 CSS 样式实现对弹出框整体样式进行修改。

2. 示例
2.1 新建 CSS 文件

新建 CSS 文件，可直接下载附件使用。

点击下载 CSS 文件：dialogcss.css

CSS 文件代码如下：

1. fr-core-window-header.fr-core-panel-style-blue
   
2. {
   
3.     background:#093574;
   
4. }
   
5. .fr-core-window-body
   
6. {
   
7.     background:#093574  !important;;
   
8. }
   
9. .fr-core-panel-body-border
   
10. {
    
11.     border: 0px solid  !important;
    
12.     position: absolute  !important;
    
13.     top: 30px;left: 0px  !important;
    
14.     border-top: none  !important;
    
15.     width: 1400px  !important;
    
16.     z-index: 0  !important;

复制代码

2.2  放置 CSS 文件

将该 CSS 文件放置于%FR_HOME%\webapps\webroot\help\css\路径下。如下图所示：

注：远程设计的报表，CSS 需放置在对应远程服务器报表工程的目录下。

2.3 主报表引入 CSS 文件

决策报表为例，需准备三个模板，一个主模板，两个子模板。

主模板中需添加一个超链接，超链接报表打开方式为对话框，链接到子模板1，如下图所示：

两个子模板内容基本一致，都需要添加超链接，点击时跳转到另一张子模板。如下图所示：

主模板中为 body 添加「初始化事件」，引用 CSS 文件，如下图所示：

JavaScript 代码如下：

1. var link='<link rel="stylesheet" type="text/css" href="../../help/css/dialogcss.css">';
   
2. $("head").append(link);

复制代码

注： 上述  JS 代码中，CSS 文件路径为相对路径，若报表要挂载在平台上，CSS 文件需要放置在平台依赖的报表工程下。

2.4 效果预览

预览主报表，点击「点击」按钮，弹出子报表弹窗，点击弹窗超链，可以看到，切换子报表时，已无闪烁空白。如下图所示：

注：不支持移动端。

3. 已完成模板

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\决策报表弹出框整体样式修改_主表.frm

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\决策报表弹出框整体样式修改_子表1.frm

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\决策报表弹出框整体样式修改_子表2.frm

点击下载模板：

决策报表弹出框整体样式修改_主表.frm

决策报表弹出框整体样式修改_子表1.frm

决策报表弹出框整体样式修改_子表2.frm

很注重细节，这个很nice 棒棒哒