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
|