22、自定义模态窗口在外部数据 API 中的实现与应用

自定义模态窗口在外部数据 API 中的实现与应用

1. 引言

在网页开发中，模态窗口是一种强大的工具，它可以在不离开当前页面的情况下与用户进行交互，提供额外的信息或表单。本文将详细介绍如何实现一个自定义模态窗口，用于从外部 API 获取公司信息，并将选定的信息填充到父页面的表单字段中。

2. 实现自定义模态窗口的整体思路

为了实现这个解决方案，采用了一种集中式的方法，将所有 API 逻辑和复杂操作集中在一个无代码的 Power Automate 云流中。然后，通过嵌入在网页模板中的 JavaScript 代码调用这个云流。具体步骤如下：
1. 创建一个专用的网页模板，用于包含所有必要的代码，包括自定义模态窗口的创建、填充从云流响应中获取的数据，以及管理行选择以有效地填充父页面的表单字段。
2. 使用 JavaScript 控制模态窗口的行为，确保它只在满足特定条件时出现，并与父页面的表单字段无缝集成。

3. 网页模板 - AccountDataByWebAPI

3.1 HTML 结构

以下是用于创建自定义模态窗口的 HTML 代码：

<div class="container" role="main">
    <!-- Modal Structure -->
    <div id="Addrs_modalContainer" class="Addrs_modal">
        <div class="Addrs_modal-content">