## Dialog Informs users while preserving the current page state. ### Basic usage Dialog pops up a dialog box, and it's quite customizable. :::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog. ```html click to open the Dialog This is a message Cancel Confirm ``` ::: ### Customizations The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。 :::demo ```html open a Table nested Dialog open a Form nested Dialog Cancel Confirm ``` ::: ### Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | title | title of Dialog | string | — | — | | size | size of Dialog | string | tiny/small/large/full | small | | top | value for `top` of Dialog CSS, works when `size` is not `full` | string | — | 15% | | modal | whether a mask is displayed | boolean | — | true | | lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true | | custom-class | custom class names for Dialog | string | — | — | | close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true | | close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true | ### Slot | Name | Description | |------|--------| | — | content of Dialog | | footer | content of the Dialog footer | ### Methods Each `el-dialog` instance has the following methods that can be used to open/close the instance without explicitly changing the value of `v-model`: | Method | Description | |------|--------| | open | open the current instance | | close | close the current instance | ### Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | open | triggers when the Dialog opens | — | | close | triggers when the Dialog closes | — |