JS实现打开对话框后主窗口虚化及窗口关闭监听效果

帆软社群问答顾问; 入选2022年帆软产品致谢名单;
1. 概述1.1 应用场景
本文将要介绍JS打开iframe对话框后,父窗口模糊效果,及iframe窗口的关闭监听效果。
看完本文,你还可以举一反三实现更多,更灵活的窗口效果.
1.2 实现思路
利用JS在打开窗口时,给父窗口添加模糊遮罩效果.
在父窗口的加载结束事件中重写子窗口关闭按钮的点击事件,并用JS去掉父窗口的模糊遮罩。

2. 示例2.1 设计模板
新建2-3个cpt模板.
分别命名为:iframe关闭监听-父窗口.cpt,iframe关闭监听-子窗口.cpt,iframe关闭监听-孙窗口.cpt
并将模板保存在 报表目录的demo文件夹下。
在父窗口中添加一个按钮,按钮名称命名为:打开.
在子窗口中添加三个按钮,分别命名:关闭,打开,全部关闭
在孙窗口中添加两个按钮,分别命名:关闭,全部关闭
在上述几个cpt模板中全部添加纸张背景,选择一个纹理图案(为了测试窗口模糊效果)
2.2 添加事件
2.2.1在父窗口的打开按钮中添加点击事件,JS代码如下:
$(".content-container").css("filter","blur(2px)")//父窗口遮罩

//以下代码是实现打开iframe窗口

var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");

$iframe.attr("src", "${servletURL}?reportlet=/demo/iframe关闭监听-子窗口.cpt&op=write");

var o = {

title:"iframe子窗口" ,

width : 400,height: 400};

FR.showDialog(o.title, o.width, o.height, $iframe,o);

2.2.2在子窗口的关闭按钮中添加点击事件,JS代码如下:
parent.$(".content-container").css("filter","none")//清除父窗口遮罩
parent.FR.closeDialog();//关闭父窗口打开的对话框;
parent.FR.destroyDialog();//销毁父窗口打开的对话框;这段代码不加,关闭对话框,有可能鼠标还是处于拖动窗口状态,对话框的虚线框还存在。
2.2.3子窗口的打开按钮,添加点击事件,JS代码如下:
$(".content-container").css("filter","blur(2px)")//父窗口添加模糊遮罩
//以下代码是实现在子窗口中打开iframe窗口
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");

$iframe.attr("src", "${servletURL}?reportlet=/demo/iframe关闭监听-孙窗口.cpt&op=write");

var o = {

title:"iframe孙窗口" ,

width : 300,height: 300};

FR.showDialog(o.title, o.width, o.height, $iframe,o);


2.2.4子窗口的全部关闭按钮中,添加点击事件,JS代码如下:
parent.$(".content-container").css("filter","none")//清除父窗口遮罩
top.parent.$(".content-container").css("filter","none")//清除顶层父窗口遮罩
top.parent.FR.closeDialog();//关闭顶层父窗口打开的对话框;注意区别关闭按钮中的点击事件,这里加上top,是从最顶层的父窗口中直接关闭对话框。下同
top.parent.FR.destroyDialog();//销毁顶层父窗口打开的对话框;
2.2.5在父窗口cpt和子窗口cpt的模板web属性设置中的填报页面设置中添加加载结束事件,代码如下:
setInterval(function(){
        $(".fr-core-panel-tool-close").mousedown(function(){//重写窗口右上角的关闭按钮点击事件
        $(".content-container").css("filter","none")//清除父窗口的模糊遮罩
        window.FR.closeDialog();//关闭对话框
        });
},1000);
2.2.6在孙窗口中对关闭按钮添加点击事件,JS代码如下:
//方法同子窗口中的关闭按钮
parent.$(".content-container").css("filter","none")
parent.FR.closeDialog();
parent.FR.destroyDialog();
2.2.7 在孙窗口中对全部关闭按钮添加点击事件,JS代码如下:
//方法同子窗口中的全部关闭按钮
parent.$(".content-container").css("filter","none")
top.parent.$(".content-container").css("filter","none")
top.parent.FR.closeDialog();
top.parent.FR.destroyDialog();
2.3 效果预览
注:此方法涉及jqurey方法,仅在PC端Chrome浏览器测试有效.


3. 注意事项
其他浏览器未做测试。不保证有效.
有兴趣的朋友可以试一下。


编辑于 2021-5-21 14:09  

发表于 2021-5-20 11:39:15
发表于 2021-10-29 17:05:35
有没有用JS修改对话框透明度的文档啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 6关注人数 20757浏览人数
最后回复于:2023-9-19 11:37

返回顶部 返回列表