跳至主要内容

Open Page as Popup 打开页面弹窗

点击组件后,把当前 PPT 中的另一个导出页面作为弹窗打开;主页面不跳走,弹窗页面继续使用自己的 HTML、SVG、JavaScript 和图片资源。

交互文档修订:2026-10-21

交互: Open Page as Popup 打开页面弹窗

点击组件后,把当前 PPT 中的另一个导出页面作为弹窗打开;主页面不跳走,弹窗页面继续使用自己的 HTML、SVG、JavaScript 和图片资源。

功能说明

Open Page as Popup 在当前页上方打开另一个 Page Code,适用于设备详情、确认和参数页。主页面保留,关闭弹窗后继续显示。

使用方法:先完成三个主要选择

绑定到打开按钮,配置 Popup page、Appearance 和 Interaction,并启用 Enabled:

  • Popup page:从当前 PPT 页面列表选择目标,或输入已经导出的 Page Code;不要添加 .html 或文件夹路径。
  • Appearance:选择 Fit content 适配主要内容,或 Full page canvas 显示完整画布。
  • Interaction:按需要勾选 Block the page behind、Esc closes the popup、Clicking outside closes it。
  • Enabled:控制当前行为是否启用;保存前检查下方摘要是否符合预期。

Advanced options 什么时候使用

固定目标页可直接在 Popup page 中选择。需要动态选择页面、传递参数或调整背景时,展开 Advanced options:

  • Use a dynamic Page Code expression:用 JavaScript 表达式返回 Page Code;启用后必须填写有效表达式。
  • Page parameters (JSON object):传给弹窗页的静态 JSON 对象,例如 {"PLC":"PLC_LINE01","Device":"PUMP_01"};数组不是合法的顶层参数对象。
  • Build page parameters with an expression:运行时可返回参数对象或有序的 { key, value } 数组;数组适合保留重复 Key。
  • Background behind popup:Dim the page behind 或 Keep the page visible;Dim 模式可调整 0% 到 85% 的强度。
  • Allow the same popup to open more than once:允许同一 Page Code 同时存在多个实例;默认关闭以避免重复弹窗。
TextText
// 静态页面 + 静态参数
Page Code: device_details
Page parameters: {"PLC": "PLC_LINE01", "Device": "PUMP_01", "active": true}

// 动态页面示例
selectedDeviceType === "pump" ? "pump_details" : "valve_details"

弹窗参数如何传入、读取和返回结果

弹窗静态输入框要求 JSON 对象,不能表达重复 Key;动态表达式则可返回有序的 { key, value } 数组并保留重复 Key。为兼容宿主弹窗和本地回退,参数值使用字符串、数字、布尔值或 null;目标弹窗页仍用 GetPageParameter、GetPageParameterValues 或 GetPageParameters 读取,读取结果按字符串处理。

  • 静态参数:直接填写 JSON 对象。
  • 动态参数:Build page parameters with an expression 可返回对象或 { key, value } 数组;不要返回 Promise 或 DOM 对象。
  • 目标页读取:在弹窗页 Page Script 中调用 GetPageParameter*。
  • 关闭结果:Close Current Popup 的 Result expression 是反向返回给打开方的结果,不属于页面查询参数。
  • 参数仅用于页面上下文,不能绕过宿主权限,也不能扩大 Tag 访问范围。
JavaScriptJavaScript
// 弹窗页 Page Script
var plc = GetPageParameter("PLC", "");
var device = GetPageParameter("Device", "");
var activeText = GetPageParameter("active", "false");
var active = activeText === "true";

交付边界与常见错误

弹窗目标必须是包内导出页面。新增、删除、重命名弹窗页或修改公共资源后,须整包导出。请从页面列表选择目标,保持 Page Code 与清单一致;不要用 Open Link 模拟弹窗或把标题当作 URL。

Open Popup 编辑器,显示 Popup page、Appearance、Interaction 和 Enabled
图示 1: Open Popup 编辑器

主区选择弹窗页、Fit content 或 Full page canvas,并配置遮挡下层页面及关闭方式;图中 Advanced options 未展开。

再次点击图片或按 Esc 关闭