---
order: 17
navTitle: 对话框/悬浮面板
---
# SuperPage组件-对话框/悬浮面板

SuperPage提供了对话框/悬浮面板组件，在父页面中可以弹出子页面，并可增删改数据进行提交。如在PC端和移动端点击按钮显示对话框/悬浮面板会有不同的适配效果：

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

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

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

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

## 使用对话框/悬浮面板组件{#start}

对话框/悬浮面板通常是由用户的交互触发而显示的，比如点击[文本](../common/text.md)、[按钮](../common/button.md)等组件显示对话框/悬浮面板。对话框/悬浮面板与页面类似，所有组件均可拖入到其中，因此可以根据需求可以有多种类型的对话框，以信息对话框为例：

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

**操作步骤：**

1. **拖入对话框/悬浮面板组件：**  在**组件区**>**嵌入**中将**对话框/悬浮面板**组件拖入到画布中
2. **编辑对话框内容：**  双击对话框进入编辑界面，可从左侧组件区域中拖入多个组件到对话框中，如拖入`文本组件`到内容区域，并输入内容`这是一段信息`
3. **配置显示对话框/悬浮面板交互：**  在`点击打开Dialog`文本上设置**显示对话框/悬浮面板**交互，**对话框组件**属性选择对应的对话框，如`对话框1`，更多设置查看[显示对话框/悬浮面板交互](../../design/action/show-dialog.md#start)

:::tip
在预览、查看等界面不能看见对话框/悬浮面板组件，所以该组件可以位于画布中任意位置且不影响其他组件，建议位于被显示对话框/悬浮面板交互引用的组件附近。当页面中无法选中时可点击**文件**>**显示/隐藏组件大纲**进行选中

对话框有默认编辑界面，可在默认界面上做修改，也可删除重新布局。对话框宽度与高度默认最小设置为`500`，若需要的对话框较小，可在**对话框**>**位置大小**中进行调整，默认界面如下：
:::

![默认界面](./images/pptx-image-dialog.png)

## 显示对话框/悬浮面板交互{#show-dialog}

对话框/悬浮面板组件必须配合**显示对话框/悬浮面板**交互使用才能将对话框/悬浮面板中设置的内容展示在页面中，才能实现其作用。具体操作及设置可查看[显示对话框/悬浮面板交互](../../design/action/show-dialog.md)。

## 悬浮面板{#floatdialog}

悬浮面板与对话框在功能上无本质区别，但在弹出的效果有所不同，悬浮面板弹出的效果是直接悬浮在弹出位置下方的，只因在**属性栏**>**对话框**>**高级**中勾选了**显示为悬浮面板**属性，悬浮面板组件该属性默认被勾选。同时在**高级**中勾选**允许拖动窗口大小**属性后，也可修改弹出的对话框大小。

![悬浮面板](./images/2021-03-25-09-46-34.png)