> - The **<dialog>** component does not support the **focusable** and **click-effect** attributes.
> The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
## Styles
Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](js-components-common-styles.md) are supported.
Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event.
## Events
The following events are supported. The [universal events](../arkui-js/js-components-common-events.md) are not supported.
| cancel | - | Triggered when a user taps a non-dialog area to cancel the pop-up. |
| show7+ | - | Triggered when the pop-up is displayed. |
| close7+ | - | Triggered when the pop-up is closed. |
## Methods
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods.
The following methods are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are not supported.
| Name | Parameter | Description |
| ----- | ---- | ------ |
| show | - | Shows a dialog box.|
| close | - | Close the dialog box.|
| Name | Parameter | Description |
| ----- | --------- | -------------------- |
| show | - | Shows a dialog box. |
| close | - | Closes a dialog box. |
> **NOTE**
>
> Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
## Example Code
## Example
```
```html
<!-- xxx.hml -->
<divclass="doc-page">
<divclass="btn-div">
...
...
@@ -73,6 +79,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
</div>
</dialog>
</div>
```
```css
/* xxx.css */
.doc-page{
flex-direction:column;
...
...
@@ -119,30 +128,33 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
| fontSize | number \| string | No | 10 | Font size, in vp. |
| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|