1# Alert Dialog Box (AlertDialog) 2 3You can set the text content and response callback for an alert dialog box. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [showAlertDialog](../js-apis-arkui-UIContext.md#showalertdialog) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext) to obtain the UI context. 12 13## AlertDialog.show 14 15static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions) 16 17Shows an alert dialog box. 18 19**Atomic service API**: This API can be used in atomic services since API version 11. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description| 26| ---- | --------------- | -------- | -------- | 27| value | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) \| [AlertDialogParamWithOptions](#alertdialogparamwithoptions10)<sup>10+</sup> | Yes| Defines and displays the **\<AlertDialog>** component.| 28 29## AlertDialogParam 30 31| Name | Type | Mandatory| Description | 32| --------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 33| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 34| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Subtitle of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 35| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 36| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked. The value **true** means to close the dialog box when the overlay is clicked, and **false** means the opposite.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 37| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 38| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>**NOTE**<br>If **showInSubWindow** is set to **true** in **UIExtension**, the dialog box is aligned with the host window based on **UIExtension**.| 39| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.<br>Default value: **{ dx: 0 , dy: 0 }**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 40| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.<br>Default value: **4**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 41| maskRect<sup>10+</sup> | [Rectangle](#rectangle8) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.<br>Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**<br>**NOTE**<br>**maskRect** does not take effect when **showInSubWindow** is set to **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 42| showInSubWindow<sup>11+</sup> | boolean | No | Whether to show the dialog box in a sub-window when the dialog box needs to be displayed outside the main window.<br>Default value: **false**<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 43| isModal<sup>11+</sup> | boolean | No | Whether the dialog box is a modal. A modal dialog box has a mask applied, while a non-modal dialog box does not.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 44| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the dialog box.<br>Default value: **Color.Transparent**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 45| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | No | Background blur style of the dialog box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 46| onWillDismiss<sup>12+</sup> | Callback<[DismissDialogAction](#dismissdialogaction12)> | No | Callback for interactive closure of the dialog box.<br>**NOTE**<br>1. If this callback is registered, the dialog box will not be closed immediately after the user touches the mask or the Back button, presses the Esc key, or swipes left or right on the screen. The **reason** parameter in the callback is used to determine whether the dialog box can be closed. The reason returned by the component does not support the value **CLOSE_BUTTON**.<br>2. In the **onWillDismiss** callback, another **onWillDismiss** callback is not allowed.| 47| cornerRadius<sup>12+</sup> | [BorderRadiuses](ts-types.md#borderradiuses9) \| [Dimension](ts-types.md#dimension10) | No | Radius of the rounded corners of the background.<br>You can set separate radiuses for the four rounded corners.<br>Default value: **{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }**<br> The radius of the rounded corners is subject to the component size. Its maximum value is half of the component width or height. If the value is negative, the default value is used.<br> When set to a percentage, the value defines the radius as a percentage of the parent component's width or height.| 48| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10) | No | Transition effect for the entrance and exit of the dialog box.<br>**NOTE**<br> 1. If this parameter is not set, the default effect is used.<br> 2. Touching the Back button during the entrance animation pauses the entrance animation and starts the exit animation. The final effect is one obtained after the curves of the entrance and exit animations are combined.<br> 3. Touching the Back button during the exit animation does not affect the animation playback. Touching the Back button again closes the application. | 49| width<sup>12+</sup> | [Dimension](ts-types.md#dimension10) | No | Width of the dialog box.<br>**NOTE**<br>- Default maximum width of the dialog box: 400 vp<br>- When this parameter is set to a percentage, the reference width of the dialog box is the width of the window where the dialog box is located. You can decrease or increase the width as needed.| 50| height<sup>12+</sup> | [Dimension](ts-types.md#dimension10) | No | Height of the dialog box.<br>**NOTE**<br>- Default maximum height of the dialog box: 0.9 x (Window height – Safe area)<br>- When this parameter is set to a percentage, the reference height of the dialog box is the height of the window where the dialog box is located minus the safe area. You can decrease or increase the height as needed.| 51| borderWidth<sup>12+</sup> | [Dimension](ts-types.md#dimension10) \| [EdgeWidths](ts-types.md#edgewidths9) | No | <br>You can set the width for all four sides or set separate widths for individual sides.<br>Default value: **0**<br> When set to a percentage, the value defines the border width as a percentage of the parent dialog box's width.<br>If the left and right borders are greater than its width, or the top and bottom borders are greater than its height, the dialog box may not display as expected.| 52| borderColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9) | No | Border color of the dialog box.<br>Default value: **Color.Black**<br> **borderColor** must be used with **borderWidth** in pairs.| 53| borderStyle<sup>12+</sup> | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](ts-types.md#edgestyles9) | No | Border style of the dialog box.<br>Default value: **BorderStyle**<br> **borderStyle** must be used with **borderWidth** in pairs.| 54| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Shadow of the dialog box.<br> Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise| 55 56## AlertDialogParamWithConfirm 57 58Inherits from [AlertDialogParam](#alertdialogparam). 59 60**Atomic service API**: This API can be used in atomic services since API version 11. 61 62| Name | Type | Mandatory | Description | 63| ---------- | ---------------- | ---------- | ------------------------------- | 64| confirm | {<br>enabled<sup>10+</sup>?: boolean,<br>defaultFocus<sup>10+</sup>?: boolean,<br>style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10),<br>value: [ResourceStr](ts-types.md#resourcestr),<br>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br>action: () => void<br>} | No | Information about the confirm button. When the dialog box has focus and the **Tab** key is not pressed for sequential focus navigation, the button responds to the **Enter** key by default.<br>**enabled**: whether to respond when the button is clicked. The value **true** means to respond when the button is clicked, and **false** means the opposite.<br>Default value: **true**<br>**defaultFocus**: whether the button is the default focus. The value **true** means that the button is the default focus, and **false** means the opposite.<br>Default value: **false**<br>**style**: button style.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**value**: button text.<br>**fontColor**: font color of the button.<br>**backgroundColor**: background color of the button.<br>**action**: callback upon button clicking.| 65 66Priorities of the **confirm** parameters: **fontColor** and **backgroundColor** > **style** > **defaultFocus** 67 68| backgroundColor | fontColor | style | defaultFocus | Effect | 69| --------------- | --------- | --------------------------- | ------------ | -------- | 70| Green | Red | - | - | Red text on green background| 71| Green | - | DialogButtonStyle.HIGHLIGHT | - | White text on green background| 72| Green | - | DialogButtonStyle.DEFAULT | - | Blue text on green background| 73| Green | - | - | TRUE | White text on green background| 74| Green | - | - | FALSE/- | Blue text on green background| 75| - | Red | DialogButtonStyle.HIGHLIGHT | - | Red text on blue background| 76| - | Red | DialogButtonStyle.DEFAULT | - | Red text on white background| 77| - | Red | - | TRUE | Red text on blue background| 78| - | Red | - | FALSE/- | Red text on white background| 79| - | - | DialogButtonStyle.HIGHLIGHT | - | White text on blue background| 80| - | - | DialogButtonStyle.DEFAULT | - | Blue text on white background| 81| - | - | - | TRUE | White text on blue background| 82| - | - | - | FALSE/- | Blue text on white background| 83 84## AlertDialogParamWithButtons 85 86Inherits from [AlertDialogParam](#alertdialogparam). 87 88**Atomic service API**: This API can be used in atomic services since API version 11. 89 90| Name | Type | Mandatory | Description | 91| --------------- | ---------------------- | ------------ | --------------------- | 92| primaryButton | {<br>enabled<sup>10+</sup>?: boolean,<br>defaultFocus<sup>10+</sup>?: boolean,<br>style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10),<br>value: [ResourceStr](ts-types.md#resourcestr),<br>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br>action: () => void;<br>} | No| Information about the confirm button. When the dialog box has focus and the **Tab** key is not pressed for sequential focus navigation, the button responds to the **Enter** key by default.<br>**enabled**: whether to respond when the button is clicked.<br>Default value: **true**<br>**defaultFocus**: whether the button is the default focus.<br>Default value: **false**<br>**style**: button style.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**value**: button text.<br>**fontColor**: font color of the button.<br>**backgroundColor**: background color of the button.<br>**action**: callback upon button clicking.| 93| secondaryButton | {<br>enabled<sup>10+</sup>?: boolean,<br>defaultFocus<sup>10+</sup>?: boolean,<br>style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10),<br>value: [ResourceStr](ts-types.md#resourcestr),<br>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br>action: () => void;<br>} | No | Information about the confirm button.<br>**enabled**: whether to respond when the button is clicked.<br>Default value: **true**<br>**defaultFocus**: whether the button is the default focus.<br>Default value: **false**<br>**style**: button style.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**value**: button text.<br>**fontColor**: font color of the button.<br>**backgroundColor**: background color of the button.<br>**action**: callback upon button clicking.| 94 95## AlertDialogParamWithOptions<sup>10+</sup> 96 97Inherits from [AlertDialogParam](#alertdialogparam). 98 99**Atomic service API**: This API can be used in atomic services since API version 11. 100 101| Name | Type | Mandatory | Description | 102| --------------- | ---------------------- | ------------ | --------------------- | 103| buttons<sup>10+</sup> | Array<[AlertDialogButtonOptions](#alertdialogbuttonoptions10)> | Yes | Buttons in the dialog box.| 104|buttonDirection<sup>10+</sup> | [DialogButtonDirection](#dialogbuttondirection10)| No | Direction in which buttons are laid out.<br>Default value: **DialogButtonDirection.AUTO**<br>When there are more than three buttons, the Auto mode (which automatically switches to the vertical layout when there are more than two buttons) is recommended. In non-Auto mode, buttons that extend beyond the display area are clipped.| 105 106## AlertDialogButtonOptions<sup>10+</sup> 107 108**Atomic service API**: This API can be used in atomic services since API version 11. 109 110| Name | Type | Mandatory | Description | 111| ------------------| ---------------------- | ------------ | --------------------- | 112| enabled | boolean | No | Whether to respond when the button is clicked.<br>Default value: **true** | 113| defaultFocus | boolean | No | Whether the button is the default focus.<br>Default value: **false** | 114| style | [DialogButtonStyle](#dialogbuttonstyle10) | No | Style of the button.<br>Default value: **DialogButtonStyle.DEFAULT** | 115| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the button. If the value is null, the button is not displayed. | 116| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the button. | 117| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the button. | 118| action | () => void | Yes | Callback upon button clicking. | 119| primary<sup>12+</sup> | boolean | No | Whether the button responds to the **Enter** key by default when the dialog box has focus and the **Tab** key is not pressed for sequential focus navigation. If there are multiple buttons, set this parameter to **true** for only one button. Otherwise, no button will respond.| 120 121## DialogButtonDirection<sup>10+</sup> 122 123**Atomic service API**: This API can be used in atomic services since API version 11. 124 125| Name | Description | 126| -------------------------- | --------- | 127| AUTO | Buttons are laid out horizontally when there are two or fewer buttons and vertically otherwise.| 128| HORIZONTAL | Buttons are laid out horizontally.| 129| VERTICAL | Buttons are laid out vertically.| 130 131## DialogAlignment 132 133**Atomic service API**: This API can be used in atomic services since API version 11. 134 135| Name | Description | 136| ------------------------ | ------- | 137| Top | Vertical top alignment.| 138| Center | Vertical center alignment.| 139| Bottom | Vertical bottom alignment.| 140| Default | Default alignment. | 141| TopStart<sup>8+</sup> | Top left alignment. | 142| TopEnd<sup>8+</sup> | Top right alignment. | 143| CenterStart<sup>8+</sup> | Center left alignment. | 144| CenterEnd<sup>8+</sup> | Center right alignment. | 145| BottomStart<sup>8+</sup> | Bottom left alignment. | 146| BottomEnd<sup>8+</sup> | Bottom right alignment. | 147 148## Rectangle<sup>8+</sup> 149 150The **Rectangle** type is used to represent a mask area of a dialog box. 151 152**Atomic service API**: This API can be used in atomic services since API version 11. 153 154| Name | Type | Mandatory| Description | 155|--------|------------------------------|----|-----------------------------------| 156| x | [Length](ts-types.md#length) | No | X coordinate of the mask area of the dialog box relative to the upper left corner of the window.<br>Default value: **0vp**| 157| y | [Length](ts-types.md#length) | No | Y coordinate of the mask area of the dialog box relative to the upper left corner of the window.<br>Default value: **0vp**| 158| width | [Length](ts-types.md#length) | No | Width of the mask area of the dialog box.<br>Default value: **'100%'** | 159| height | [Length](ts-types.md#length) | No | Height of the mask area of the dialog box.<br>Default value: **'100%'** | 160 161> **NOTE** 162> 163> **x** and **y** can be set to a positive or negative percentage value. When **x** is set to **'100%'**, the mask area is moved rightward by the window width. When **x** is set to **'-100%'**, the mask area is moved leftward by the window width. When **y** is set to **'100%'**, the mask area is moved downward by the window height. When **y** is set to **'-100%'**, the mask area is moved upward by the window height. 164> 165> **width** and **height** can be set in percentage and can only be set to positive values. If they are set to negative values, the default values are used instead. 166> 167> The percentage is calculated based on the width and height of the window. 168 169## DialogButtonStyle<sup>10+</sup> 170 171**Atomic service API**: This API can be used in atomic services since API version 11. 172 173| Name | Description | 174| --------- | --------------------------------- | 175| DEFAULT | Blue text on white background (black background under the dark theme).| 176| HIGHLIGHT | White text on blue background. | 177 178## DismissDialogAction<sup>12+</sup> 179 180| Name | Type | Mandatory| Description | 181|----------|-------------------------------------|------|----------------------------------------------------------------| 182| dismiss | Callback<void> | Yes | Callback for closing the dialog box. This API is called only when the dialog box needs to be exited. | 183| reason | [DismissReason](#dismissreason12) | Yes | Reason why the dialog box cannot be closed. You must specify whether to close the dialog box for each of the listed actions.| 184 185## DismissReason<sup>12+</sup> 186 187| Name | Description | 188| --------------- | -------------------------------- | 189| PRESS_BACK | Touching the Back button, swiping left or right on the screen, or pressing the Esc key. | 190| TOUCH_OUTSIDE | Touching the mask. | 191| CLOSE_BUTTON | Touching the Close button. | 192 193## Example 194 195### Example 1 196 197```ts 198// xxx.ets 199@Entry 200@Component 201struct AlertDialogExample { 202 build() { 203 Column({ space: 5 }) { 204 Button('one button dialog') 205 .onClick(() => { 206 AlertDialog.show( 207 { 208 title: 'title', 209 message: 'text', 210 autoCancel: true, 211 alignment: DialogAlignment.Bottom, 212 offset: { dx: 0, dy: -20 }, 213 gridCount: 3, 214 confirm: { 215 value: 'button', 216 action: () => { 217 console.info('Button-clicking callback') 218 } 219 }, 220 cancel: () => { 221 console.info('Closed callbacks') 222 }, 223 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 224 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 225 console.log("dialog onWillDismiss") 226 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 227 dismissDialogAction.dismiss() 228 } 229 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 230 dismissDialogAction.dismiss() 231 } 232 } 233 } 234 ) 235 }) 236 .backgroundColor(0x317aff) 237 Button('two button dialog') 238 .onClick(() => { 239 AlertDialog.show( 240 { 241 title: 'title', 242 subtitle: 'subtitle', 243 message: 'text', 244 autoCancel: true, 245 alignment: DialogAlignment.Bottom, 246 gridCount: 4, 247 offset: { dx: 0, dy: -20 }, 248 primaryButton: { 249 value: 'cancel', 250 action: () => { 251 console.info('Callback when the first button is clicked') 252 } 253 }, 254 secondaryButton: { 255 enabled: true, 256 defaultFocus: true, 257 style: DialogButtonStyle.HIGHLIGHT, 258 value: 'ok', 259 action: () => { 260 console.info('Callback when the second button is clicked') 261 } 262 }, 263 cancel: () => { 264 console.info('Closed callbacks') 265 }, 266 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 267 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 268 console.log("dialog onWillDismiss") 269 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 270 dismissDialogAction.dismiss() 271 } 272 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 273 dismissDialogAction.dismiss() 274 } 275 } 276 } 277 ) 278 }).backgroundColor(0x317aff) 279 Button('three button dialog') 280 .onClick(() => { 281 AlertDialog.show( 282 { 283 title: 'title', 284 subtitle: 'subtitle', 285 message: 'text', 286 autoCancel: true, 287 alignment: DialogAlignment.Bottom, 288 gridCount: 4, 289 offset: { dx: 0, dy: -20 }, 290 buttonDirection: DialogButtonDirection.HORIZONTAL, 291 buttons: [ 292 { 293 value: 'Button', 294 action: () => { 295 console.info('Callback when button1 is clicked') 296 } 297 }, 298 { 299 value: 'Button', 300 action: () => { 301 console.info('Callback when button2 is clicked') 302 } 303 }, 304 { 305 value: 'Button', 306 enabled: true, 307 defaultFocus: true, 308 style: DialogButtonStyle.HIGHLIGHT, 309 action: () => { 310 console.info('Callback when button3 is clicked') 311 } 312 }, 313 ], 314 cancel: () => { 315 console.info('Closed callbacks') 316 }, 317 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 318 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 319 console.log("dialog onWillDismiss") 320 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 321 dismissDialogAction.dismiss() 322 } 323 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 324 dismissDialogAction.dismiss() 325 } 326 } 327 } 328 ) 329 }).backgroundColor(0x317aff) 330 }.width('100%').margin({ top: 5 }) 331 } 332} 333``` 334 335 336 337### Example 2 338 339```ts 340// xxx.ets 341@Entry 342@Component 343struct AlertDialogExample { 344 build() { 345 Column({ space: 5 }) { 346 Button('one button dialog') 347 .onClick(() => { 348 AlertDialog.show( 349 { 350 title: 'title', 351 subtitle: 'subtitle', 352 message: 'text', 353 autoCancel: true, 354 alignment: DialogAlignment.Center, 355 gridCount: 4, 356 showInSubWindow: true, 357 isModal: true, 358 offset: { dx: 0, dy: -20 }, 359 buttonDirection: DialogButtonDirection.HORIZONTAL, 360 buttons: [ 361 { 362 value: 'Button', 363 action: () => { 364 console.info('Callback when button1 is clicked') 365 } 366 }, 367 { 368 value: 'Button', 369 action: () => { 370 console.info('Callback when button2 is clicked') 371 } 372 }, 373 { 374 value: 'Button', 375 enabled: true, 376 defaultFocus: true, 377 style: DialogButtonStyle.HIGHLIGHT, 378 action: () => { 379 console.info('Callback when button3 is clicked') 380 } 381 }, 382 ], 383 cancel: () => { 384 console.info('Closed callbacks') 385 }, 386 onWillDismiss: (dismissDialogAction: DismissDialogAction) => { 387 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 388 console.log("dialog onWillDismiss") 389 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 390 dismissDialogAction.dismiss() 391 } 392 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 393 dismissDialogAction.dismiss() 394 } 395 } 396 }) 397 }) 398 }.width('100%').margin({ top: 5 }).backgroundColor(0x317aff) 399 } 400} 401``` 402 403 404 405### Example 3 406This example sets a 3s entrance animation and a 100 ms exit animation for the alert dialog. 407```ts 408// xxx.ets 409import router from '@ohos.router'; 410@Entry 411@Component 412struct AlertDialogExample { 413 build() { 414 Column({ space: 5 }) { 415 Button('AlertDialog Set Duration') 416 .onClick(()=>{ 417 AlertDialog.show( 418 { 419 title: 'AlertDialog 1', 420 message: 'Set Animation Duration open 3 second, close 100ms', 421 autoCancel: true, 422 alignment: DialogAlignment.Top, 423 offset: { dx: 0, dy: -20 }, 424 gridCount: 3, 425 transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY 426 .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})), 427 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 428 .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))), 429 confirm: { 430 value: 'button', 431 action: () => { 432 console.info('Button-clicking callback') 433 } 434 }, 435 cancel: () => { 436 console.info('Closed callbacks') 437 } 438 } 439 ) 440 }) 441 .backgroundColor(0x317aff).height("88px") 442 }.width('100%').margin({ top: 5 }) 443 } 444} 445``` 446 447 448
