createModal
Start from API_LEVEL
2.0. Please refer to API_LEVEL.

Create Modal prompt box.
Type
function createModal(option: Option): Modal
Parameters
Option
| Property | Type | Required | DefaultValue | Description | API_LEVEL |
|---|---|---|---|---|---|
| content | string | Y | - | title of Modal | 2.0 |
| title | string | N | - | Modal dialog box title, alias for content | 3.6 |
| show | boolean | N | true | Whether to display Modal immediately after the creation is completed | 2.0 |
| onClick | (keyObj: KeyObj) => void | N | - | Whether to display Modal immediately | 2.0 |
| autoHide | boolean | N | true | Whether to automatically close the Modal dialog after clicking the Confirm or Cancel button | 2.0 |
| subtitle | string | N | - | subtitle | 3.6 |
| src | string | N | - | Icon icon path | 3.6 |
| text | string | N | - | text content | 3.6 |
| textColor | number | N | 0xFFFFFF | text color | 3.6 |
| textAlpha | number | N | 255 | Text transparency, transparency [0-255], 0 is full transparency | 3.6 |
| okButton | string | N | - | The icon path of the confirmation button | 3.6 |
| cancelButton | string | N | - | Cancel button icon icon path | 3.6 |
| capsuleButton | Array<string> | N | - | Capsule button configuration, as a string array, click type in the returned KeyObj starting from 10 | 3.6 |
KeyObj
| Property | Type | Description | API_LEVEL |
|---|---|---|---|
| type | number | Modal key name, value reference Modal key name constants | 2.0 |
Modal
| Property | Type | Description | API_LEVEL |
|---|---|---|---|
| show | (isShow: boolean) => void | Show or hide Modal | 2.0 |
Constants
Modal key name constants
| Constant | Description | API_LEVEL |
|---|---|---|
MODAL_CONFIRM | Modal Confirm button | 2.0 |
MODAL_CANCEL | Modal Cancel button | 2.0 |
Example
import { createModal, MODAL_CONFIRM } from '@zos/interaction'
const dialog = createModal({
content: 'hello world',
autoHide: false,
onClick: (keyObj) => {
const { type } = keyObj
if (type === MODAL_CONFIRM) {
console.log('confirm')
} else {
dialog.show(false)
}
},
})
dialog.show(true)