diff --git a/src/pages/services/aem-cf-editor/api/modal/index.md b/src/pages/services/aem-cf-editor/api/modal/index.md index 5ac655b5..653b6ec8 100644 --- a/src/pages/services/aem-cf-editor/api/modal/index.md +++ b/src/pages/services/aem-cf-editor/api/modal/index.md @@ -4,15 +4,6 @@ description: Learn about modal host API methods that can be used in any extensio contributors: - https://github.com/AdobeDocs/uix --- - # Modal dialogs @@ -61,15 +52,16 @@ guestConnection.host.modal.close(); The `modal.showUrl` and `modalInstance.set` methods accept a `ModalRequest` object. -| Property | Type | Required | Default | Description | -|-----------------|-------------------------------------------|----------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `url` | `string` | ✔️ | | URL of the page to load in the dialog frame. The URL must have the same origin as the extension making the modal request. | -| `title` | `string` | ✔️ | | Title of the modal to display. | -| `height` | `string`
`number`
`"auto"` | | `auto` | A number of pixels, a CSS value, or the string `auto`. The `auto` keyword will grow or shrink the modal to the height of the document in the iframe every time the guest document resizes, to a minimum of 20% and a maximum of 75% of window height. In fullscreen mode, this is ignored. | -| `width` | `string`
`number`
`"auto"` | | `auto` | A number of pixels, a CSS value, or the string `auto`. The `auto` keyword will grow or shrink the modal to the width of the document in the iframe every time the guest document resizes, to a minimum of 20% and a maximum of 75% of window width. In fullscreen mode, this is ignored. | -| `fullscreen` | `boolean` | | `false` | Display the dialog as large as possible. It will overlay most of the application, leaving small borders to indicate overlay. If true, any "width" and "height" parameters will be ignored. | -| `isDismissable` | `boolean` | | `true` | Show the dismiss button, so a user can close the modal no matter what state it is in. If an extension disables this, it must provide its own UI control which calls `modal.close()`. | -| `loading` | `boolean` | | `false` | Preserve the progress spinner that displays before the modal contents load. When `false` or unset, the modal will show a progress spinner until the guest in the iframe is connected, and then display the frame contents. If the `modal.showUrl()` call sets `{ loading: true }`, the spinner will continue displaying after the guest has connected, until the guest calls `modal.set({ loading: false })`. A modal which needs to do data fetching or layout adjustment after connecting should set `{ loading: true }` and then dismiss it from the modal when its UI is ready. | +| Property | Type | Required | Default | Description | +|-----------|------------------------------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| | | | | | +| `url` | `string` | ✔️ | | URL of the page to load in the dialog frame. The URL must have the same origin as the extension making the modal request. | +| `title` | `string` | ✔️ | | Title of the modal to display. | +| `height` | `string`
`number`
`"auto"` | | `auto` | A number of pixels, a CSS value, or the string `auto`. The `auto` keyword will grow or shrink the modal to the height of the document in the iframe every time the guest document resizes, to a minimum of 20% and a maximum of 75% of window height. In fullscreen mode, this is ignored. | +| `width` | `string`
`number`
`"auto"` | | `auto` | A number of pixels, a CSS value, or the string `auto`. The `auto` keyword will grow or shrink the modal to the width of the document in the iframe every time the guest document resizes, to a minimum of 20% and a maximum of 75% of window width. In fullscreen mode, this is ignored. | +| `fullscreen` | `boolean` | | `false` | Display the dialog as large as possible. It will overlay most of the application, leaving small borders to indicate overlay. If true, any "width" and "height" parameters will be ignored. | +| `isDismissable` | `boolean` | | `true` | Show the dismiss button, so a user can close the modal no matter what state it is in. If an extension disables this, it must provide its own UI control which calls `modal.close()`. | +| `loading` | `boolean` | | `false` | Preserve the progress spinner that displays before the modal contents load. When `false` or unset, the modal will show a progress spinner until the guest in the iframe is connected, and then display the frame contents. If the `modal.showUrl()` call sets `{ loading: true }`, the spinner will continue displaying after the guest has connected, until the guest calls `modal.set({ loading: false })`. A modal which needs to do data fetching or layout adjustment after connecting should set `{ loading: true }` and then dismiss it from the modal when its UI is ready. | ### Modal API