---
order: 14
navTitle: 弹出确认对话框
---
# SuperPage交互-弹出确认对话框

**弹出确认对话框**交互，常用来弹出提示信息，如删除数据前或者录入数据后弹出确认对话框：
|PC端|移动端|
|---|---|
|![PC端](./images/2021-06-25-18-14-08.png)|![移动端](./images/2021-07-05-18-32-54.png)|
示例地址：[列表增删改查](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%97%E8%A1%A8%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5)、[弹出确认对话框](https://demo.succbi.com/v5/DEMO/app/ap.app/index.mpg?id=%E5%BC%B9%E5%87%BA%E7%A1%AE%E8%AE%A4%E5%AF%B9%E8%AF%9D%E6%A1%86%E4%BA%A4%E4%BA%92)

## 使用弹出确认对话框{#show-confirm-dialog}

**弹出确认对话框**常与其他交互配合使用，用于在执行某个交互动作之前，弹出确认对话框进行提示，以点击**删除选中**[按钮](../../components/common/button.md)弹出确认对话框为例，具体操作步骤如下：
![操作步骤](./images/show-confirm-dialog2.gif)

1. **添加弹出确认对话框交互并设置属性：**
   - 选择**删除选中**按钮，添加**弹出确认对话框**交互
   - 在交互中，设置**标题**为`删除${[列表1].[勾选行数]}条数据`，**内容**为`您确认删除${[列表1].[勾选值].[资产名称]}吗`
2. **添加自定义按钮并设置属性：**
   - **按钮**属性选择自定义，点击设置按钮，在弹出的对话框中添加两个按钮，标题名称分别为**删除**和**取消**
   - **删除**按钮添加[删除数据](./delete-data.md)交互，数据选择`资产信息维护`，范围选择`勾选的`，数据组件选择`列表1`，**取消**按钮添加[关闭对话框/悬浮面板](./show-dialog.md#close)交互

以上设置即可实现，当点击删除选中按钮时会先弹出确认对话框提示用户：

- 选择对话框中的删除，继续执行后续的删除数据交互
- 选择取消，则关闭确认对话框

## 对话框内容设置{#content}

使用**弹出确认对话框**提示用户时，可以设置对话框的**标题**和**内容**，提供了如下属性设置：

- 标题：支持写表达式，如 `删除${[列表1].[勾选行数]}条数据`，PC端和移动端的显示效果有如下区别：
  - PC端：标题在左上角，不设置内容时显示为“确定”
  - 移动端：标题是居中显示的，不设置内容时不显示
- 内容：支持写表达式，如 `您确认删除${[列表1].[勾选值].[资产名称]}吗`，PC端和移动端的显示效果有如下区别：
  - PC端：内容是居左显示的，不设置内容时不显示
  - 移动端：内容是居中显示的，不设置内容时不显示
- 按钮：[默认](#setting1)提供了确定和取消按钮，也可以进行[自定义](#setting2)按钮设置
  ![弹出确认对话框](./images/show-confirm-dialog.png)

### 默认按钮{#setting1}

如果需要执行弹出确认对话框后面的交互，对话框的按钮默认提供了标准的**确定**和**取消**两个按钮，显示在对话框的右下角，后面的交互会根据[生效条件](./README.md#condition)来判断是否执行

- **确定按钮**：点击后该交互算作执行成功，若后面的交互生效条件设置为**上一个交互执行成功**，则接着执行后面的交互，在对话框右下角以蓝色按钮样式显示
- **取消按钮**：点击后该交互算作执行失败，若后面的交互生效条件设置为**上一个交互执行成功**，则不执行后面的交互，若后面的交互生效条件设置为**上一个交互执行失败**，则接着执行后面的交互，在对话框右下角以白色按钮样式显示

### 自定义按钮{#setting2}

除了系统自带的默认按钮设置，也可以**自定义**对话框的按钮，例如弹出提示信息对话框，只需要一个关闭按钮，就可以使用自定义方式实现，实现思路如下：

1. 选择自定义按钮，点击**设置按钮**，弹出设置按钮的对话框
2. 在对话框中，添加按钮，并设置[关闭对话框/浮动面板](./show-dialog.md#close)交互

![自定义按钮](./images/2021-07-01-15-56-42.png)

自定义按钮继续执行更多逻辑，需要在该按钮上添加交互，例如这里的关闭按钮，需要在该按钮上添加[关闭对话框/浮动面板](./show-dialog.md#close)交互执行关闭对话框的功能
:::tip

**弹出确认对话框**交互中设置为**默认**按钮时，与下方的交互之间是异步执行，即下面的交互需要等待弹出确认对话框交互执行的结果，**自定义**按钮时是同步执行，即在弹出确认对话框交互执行的同时，下面的交互就执行了。当使用**自定义按钮**后，想要异步执行，只能在自定义的按钮上配置交互处理后续逻辑。

:::

## 与提交数据类交互中弹出对话框的区别{#difference}

[提交数据](../submit-data.md)类交互如[提交表单](./submit-data.md#confirm)、[删除数据](./delete-data.md#tooltips)等，可以直接在交互中设置弹出确认对话框，该对话框与“弹出确认对话框”交互的不同之处在于提交数据类交互中的弹出确认对话框只能设置内容，不能设置标题，且对话框内按钮不可以自定义设置
|弹出确认对话框交互|删除数据|
|---|---|
|![弹出确认对话框交互](./images/show-c-d.png)|![删除数据](./images/show-d-d.png)|
示例地址：[移动弹出确认对话框](https://demo.succbi.com/v5/demo-spg/mobile/%E7%A1%AE%E8%AE%A4%E5%AF%B9%E8%AF%9D%E6%A1%86)

## 应用场景{#scene}

![应用场景](./images/show-confirm-dialog4.gif)
在表单上填写完信息后，点击**保存**按钮，弹出的确认对话框中，提供**继续录入**按钮，点击后再次进入表单页面填写新的数据。使用**自定义**按钮即可实现该效果，实现思路如下：

1. 添加**弹出确认对话框**交互：在表单界面的**保存**按钮上，添加**弹出确认对话框**交互
2. 自定义交互按钮：在该交互中添加**继续录入**按钮，并设置[显示对话框/浮动面板](./show-dialog.md)交互并再次进入表单页面填写新数据，添加取消按钮，设置[关闭对话框/浮动面板](./show-dialog.md#close)交互用来关闭对话框