所属产品: Mingcedar Studio DESIGNER

Open Page as Popup 打开页面弹窗 | Mingcedar Studio

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

首次发布 2026-10-25T12:48:42.584916104Z 最近更新 2026-10-25T12:48:42.584915142Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="interaction-open-page-as-popup">交互: Open Page as Popup 打开页面弹窗</h2>

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

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

</article>

<h3 id="interaction-open-page-as-popup-item-2">使用方法：先完成三个主要选择</h3>

<p>绑定到打开按钮，配置 Popup page、Appearance 和 Interaction，并启用 Enabled：</p>

<ul>

<li>Popup page：从当前 PPT 页面列表选择目标，或输入已经导出的 Page Code；不要添加 .html 或文件夹路径。</li>

<li>Appearance：选择 Fit content 适配主要内容，或 Full page canvas 显示完整画布。</li>

<li>Interaction：按需要勾选 Block the page behind、Esc closes the popup、Clicking outside closes it。</li>

<li>Enabled：控制当前行为是否启用；保存前检查下方摘要是否符合预期。</li>

</ul>

</article>

<h3 id="interaction-open-page-as-popup-item-3">Advanced options 什么时候使用</h3>

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

<ul>

<li>Use a dynamic Page Code expression：用 JavaScript 表达式返回 Page Code；启用后必须填写有效表达式。</li>

<li>Page parameters (JSON object)：传给弹窗页的静态 JSON 对象，例如 <code>{"PLC":"PLC_LINE01","Device":"PUMP_01"}</code>；数组不是合法的顶层参数对象。</li>

<li>Build page parameters with an expression：运行时可返回参数对象或有序的 { key, value } 数组；数组适合保留重复 Key。</li>

<li>Background behind popup：Dim the page behind 或 Keep the page visible；Dim 模式可调整 0% 到 85% 的强度。</li>

<li>Allow the same popup to open more than once：允许同一 Page Code 同时存在多个实例；默认关闭以避免重复弹窗。</li>

</ul>

<span class="line"><span>Page Code: device_details</span></span>

<span class="line"><span>Page parameters: {"PLC": "PLC_LINE01", "Device": "PUMP_01", "active": true}</span></span>

<span class="line"><span>// 动态页面示例</span></span>

<span class="line"><span>selectedDeviceType === "pump" ? "pump_details" : "valve_details"</span></span></code></pre></div>

</article>

<h3 id="interaction-open-page-as-popup-item-4">弹窗参数如何传入、读取和返回结果</h3>

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

<ul>

<li>动态参数：Build page parameters with an expression 可返回对象或 { key, value } 数组；不要返回 Promise 或 DOM 对象。</li>

<li>目标页读取：在弹窗页 Page Script 中调用 GetPageParameter*。</li>

<li>关闭结果：Close Current Popup 的 Result expression 是反向返回给打开方的结果，不属于页面查询参数。</li>

<li>参数仅用于页面上下文，不能绕过宿主权限，也不能扩大 Tag 访问范围。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>JavaScript</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: JavaScript">复制代码</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#6A737D">// 弹窗页 Page Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> plc </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> GetPageParameter</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC"</span><span style="color:#24292E">, </span><span style="color:#032F62">""</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> device </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> GetPageParameter</span><span style="color:#24292E">(</span><span style="color:#032F62">"Device"</span><span style="color:#24292E">, </span><span style="color:#032F62">""</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> activeText </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> GetPageParameter</span><span style="color:#24292E">(</span><span style="color:#032F62">"active"</span><span style="color:#24292E">, </span><span style="color:#032F62">"false"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> active </span><span style="color:#D73A49">=</span><span style="color:#24292E"> activeText </span><span style="color:#D73A49">===</span><span style="color:#032F62"> "true"</span><span style="color:#24292E">;</span></span></code></pre></div>

</article>

<h3 id="interaction-open-page-as-popup-item-5">交付边界与常见错误</h3>

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

</article>

</div>

<strong>图示 1: Open Popup 编辑器</strong>

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

</figcaption>

</figure>

</div>