# dialog - [Permission List](#en-us_topic_0000001059148550_section11257113618419) - [Child Component](#en-us_topic_0000001059148550_section9288143101012) - [Attribute](#en-us_topic_0000001059148550_section2907183951110) - [Event](#en-us_topic_0000001059148550_section20424336163815) - [Style](#en-us_topic_0000001059148550_section5775351116) - [Method](#en-us_topic_0000001059148550_section11753103216253) - [Example Code](#en-us_topic_0000001059148550_section6663311114620) The **** component is a custom pop-up container. ## Permission List None ## Child Component A single child component is supported. ## Attribute

Name	Type	Default Value	Mandatory	Description
id	string	-	No	Unique ID of a component.
style	string	-	No	Style declaration of a component.
class	string	-	No	Style class of a component, which is used to refer to a style table.
ref	string	-	No	Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.
disabled	boolean	false	No	Whether a component is disabled. If it is disabled, it cannot respond to user interaction.
data	string	-	No	Attribute set for a component to facilitate data storage and reading.

## Event

Name	Parameter	Description
cancel	-	Triggered when a user taps a non-dialog area to cancel the pop-up.

## Style The following style attributes are supported.

Name	Type	Default Value	Mandatory	Description
width	<length> \| <percentage>	-	No	Width of the component. If this attribute is not set, the default width of the pop-up window is used.
height	<length> \| <percentage>	-	No	Height of the component. If this attribute is not set, the default height of the pop-up window is used.
margin	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values: If you set only one value, it specifies the margin for all the four sides. If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides. If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom. If you set four values, they are margins for top, right, bottom, and left sides, respectively.
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	No	Left, top, right, and bottom margins.
margin-[start\|end]⁵⁺	<length>	0	No	Start and end margins.

## Method The following methods are supported.

Name	Parameter	Description
show	-	Shows a dialog box.
close	-	Closes a dialog box.

>![](public_sys-resources/icon-note.gif) **NOTE:** >Attributes and styles of a **** component cannot be dynamically updated. ## Example Code ```

``` ``` /* xxx.css */ .doc-page { flex-direction: column; justify-content: center; align-items: center; } .btn-div { width: 100%; height: 200px; flex-direction: column; align-items: center; justify-content: center; } .txt { color: #000000; font-weight: bold; font-size: 39px; } .dialog-main { width: 500px; } .dialog-div { flex-direction: column; align-items: center; } .inner-txt { width: 400px; height: 160px; flex-direction: column; align-items: center; justify-content: space-around; } .inner-btn { width: 400px; height: 120px; justify-content: space-around; align-items: center; } ``` ``` // xxx.js import prompt from '@system.prompt'; export default { showDialog(e) { this.$element('simpledialog').show() }, cancelDialog(e) { prompt.showToast({ message: 'Dialog cancelled' }) }, cancelSchedule(e) { this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully cancelled' }) }, setSchedule(e) { this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully confirmed' }) } } ``` ![](figures/gif6.gif)