---
order: 7
navTitle: 显示对话框/悬浮面板
---
# SuperPage交互-显示对话框/悬浮面板

**显示对话框/悬浮面板**用于显示该页面中的[对话框/悬浮面板](../../components/embed/dialog.md)组件。如在PC端和移动端点击按钮弹出菜单会有不同的适配效果：

|PC端|移动端|
|---|---|
|![pc端](../../components/embed/images/pc-dialog.gif)|![移动端](../../components/embed/images/mobile-dialog.gif)|

示例地址：[对话框](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%AF%B9%E8%AF%9D%E6%A1%86)

## 使用显示对话框/悬浮面板{#how-to-use}

使用**显示对话框/悬浮面板**交互，需要在该页面中提前设置好[对话框/悬浮面板](../../components/embed/dialog.md)组件，并通过**对话框组件**属性选择需要打开的对话框。以使用[按钮](../../components/common/button.md)组件为例，点击按钮打开“新增对话框”，具体步骤如下：

![操作步骤](./images/2021_03_23_09_54_45_69.gif)

1. **添加对话框组件**：在页面中添加**对话框**组件，名称设为【企业数据新增与修改】
2. **添加交互并设置属性**：
   1. 选中“新增”按钮，添加**显示对话框/悬浮面板**交互
   2. **对话框组件**属性中选择需要显示的【企业数据新增与修改】对话框，**模式**选择[新数据](#newData)

## 对话框数据显示模式设置{#data}

**模式**属性可以设置弹出对话框的数据显示方式，提供了四种选择：

- [新数据](#newData)：对话框总是执行**提交新数据**的操作
- [加载数据](#loadData)：将当前行或选中的数据传入目标对话框
- **重新初始化**：每次打开时重新初始化对话框或悬浮面板及其内容，如上一次打开对话框后进行的未保存修改，在下次打开时会清空。
- **保留上次状态**：对话框或悬浮面板打开时维持上次打开时的状态，数据引用的变化会导致该对话框进行刷新，如每次打开对话框时维持上次设置的查询条件等。

### 新数据{#newData}

**新数据**相当于参数`:newData=true`，若**对话框**或**悬浮面板**中有[数据提交](../submit-data.md)，总是执行[新增数据](../submit-data.md#insert)操作。

### 加载数据{#loadData}

**加载数据**一般配合[列表](../../components/data/list.md)组件等数据组件使用，可以将选中的当前行或勾选的数据行传入到对话框或悬浮面板中，提供了三种交互体验，在**数据范围**属性中设置：

- **勾选的**：一般搭配**列表**或**勾选框**等具有**勾选**效果的组件使用，对话框内获取到的数据仅针对勾选的数据行
- **当前行**：一般与**列表**或**浮动面板**搭配使用，对话框的数据加载仅针对当前选中行的数据
- **高亮的**：一般搭配**树**、**列表**组件使用。按住Ctrl选中数据行，选中的数据行以高亮显示，打开的对话框加载高亮显示的数据行

选择**勾选的**、**高亮的**需要设置**数据组件**，该属性将选择的**数据组件**内勾选或高亮的内容传入到对话框中。

:::tip

**模式**为**加载数据**打开对话框时，绑定了字段的输入组件**会**自动加载出相应的数据，可在此基础上进行修改并提交，常用于**修改数据**，如修改员工信息。

**模式**为**新数据**打开对话框时，绑定了字段的输入组件**不会**加载数据，在输入组件中输入的内容最终会以**新的数据行**保存至表内对应的字段中，常用于**新增数据**，如新增员工信息。

因此对话框内有提交操作时，**新增数据**和**修改数据**可以使用同一个对话框，仅**模式**上进行区别。

:::

## 参数设置{#param}

**参数**属性中可以给**全局参数**进行赋值，使用时需提前在页面中设置**全局参数**，效果与[设置参数值](./set-param-value.md)一致。

## 移动效果设置{#mobile}

在移动端使用**对话框/悬浮面板**组件时，需要使其显示效果适应手机。在**手机显示**属性中提供了手机打开对话框时的样式，效果见顶部移动端效果动图，设置如下：

- **默认**：以对话框形式打开
- **下级页面**：以打开“新页面”的形式打开对话框，对话框的**名称**属性设置的值，即为打开页面的标题
- **底部滑出**：从底部滑出，停留在底部。**顶部滑出**、**右侧滑出**、**左侧滑出**效果均与之类似

![下级页面示例](./images/2021-08-10-12-57-31.png)

## 显示对话框方式{#display}

SuperPage中可以有多种方式显示对话框：

1. 本文中描述的**显示对话框/悬浮面板**交互配合对话框组件
2. **打开链接**交互配合对话框显示方式。该方式与这里的对话框组件不同，是需要将打开链接交互中页面的**显示方式**设置为`对话框`形式，具体可参考[打开链接-显示方式设置](./linkto.md#how_to_show)

## 关闭对话框/悬浮面板{#close}

打开的对话框可以使用**关闭对话框/悬浮面板**交互进行关闭，一般搭配[对话框/悬浮面板](../../components/embed/dialog.md)中的[按钮](../../components/common/button.md)组件使用。若**对话框**内设置了打开其它的**对话框**，在关闭子对话框时可勾选**同时关闭父对话框**，同时关闭该对话框及其父对话框。

![关闭对话框/悬浮面板](./images/2021-03-23-14-21-32.png)

:::tip 交互位置
同一个组件中，添加多个交互时，交互按照从上至下顺序依次执行，当使用**关闭对话框/悬浮面板**交互时，建议将该交互放在交互列表最下面，避免对话框关闭导致后面的交互无法执行。
若希望了解更多关于交互执行顺序的说明，可参考[交互的执行条件和执行顺序](./README.md#condition)。
:::