# Custom Dialog box >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. The **CustomDialogController** class is used to display a custom dialog box. ## APIs CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, autoCancel?: boolean\}\) - Parameters

Name

Type

Mandatory

Default Value

Description

builder

CustomDialog

Yes

-

Constructor of the custom dialog box content.

cancel

() => void

No

-

Callback invoked when the dialog box is closed after the overlay exits.

autoCancel

boolean

No

true

Whether to allow users to click the overlay to exit.

alignment

DialogAlignment

No

DialogAlignment.Default

Alignment mode of the dialog box in the vertical direction.

offset

{

dx: Length | Resource,

dy: Length | Resource

}

No

-

Offset of the dialog box relative to the alignment position.

customStyle

boolean

No

false

Whether the style of the dialog box is customized.
- DialogAlignment enums

Name

Description

Top

Aligns vertically to the top.

Center

Aligns vertically to the middle.

Bottom

Aligns vertically to the bottom.

Default

Default alignment.
### CustomDialogController Creates an object. ``` dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) ``` open\(\) Opens the content of the custom dialog box. If the content has been displayed, this API does not take effect. close\(\) Closes the custom dialog box. If the dialog box is closed, the setting does not take effect. ## Example ``` @CustomDialog struct CustomDialogExample { controller: CustomDialogController cancel: () => void confirm: () => void build() { Column() { Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10 }) Image($r('app.media.icon')).width(80).height(80) Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel') .onClick(() => { this.controller.close() this.cancel() }).backgroundColor(0xffffff).fontColor(Color.Black) Button('confirm') .onClick(() => { this.controller.close() this.confirm() }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) } } } @Entry @Component struct CustomDialogUser { dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept }), cancel: this.existApp, autoCancel: true }) onCancel() { console.info('Callback when the first button is clicked') } onAccept() { console.info('Callback when the second button is clicked') } existApp() { console.info('Click the callback in the blank area') } build() { Column() { Button('click me') .onClick(() => { this.dialogController.open() }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } } ``` ![](figures/customdialog.gif)