> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: openModal()

## Article: openModal()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md

## Article Content:

# openModal()

Opens a [dashboard modal extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals.md) on your app's dashboard page.

![Open modal](https://wixmp-833713b177cebf373f611808.wixmp.com/images/5a292577254f3178bfc78d6daed8053e.gif)

> **Notes:** 
> - This method does not yet work when [developing sites](https://dev.wix.com/docs/develop-websites.md) or [building apps with Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks.md).
> - Before you call this method, you need a dashboard modal extension. Learn more about implementing dashboard modal extensions with the [Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-modals/add-dashboard-modal-extensions-with-the-cli.md) and in [self-hosted apps](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/dashboard-extensions/add-self-hosted-dashboard-modal-extensions.md).

## Method Declaration

```ts
(modalInfo: ModalInfo) => { modalClosed: Promise<Serializable> }
```

## Parameters

| Name        | Type        | Description                                                |
|:------------|:------------|:-----------------------------------------------------------|
| `modalInfo` | `ModalInfo` | Information about the dashboard modal to open. |

> **Note:** `openModal()` used to accept 2 parameters: `modalId` and `params`. These parameters have been wrapped inside a `modalInfo` object. Using 2 parameters is deprecated but still supported.

#### `ModalInfo` Object

| Name      | Type                  | Description                                                                |
|:----------|:----------------------|:---------------------------------------------------------------------------|
| `modalId` | `string`              | ID of the dashboard modal extension to open, as defined in the Wix Dev Center. |
| `params`  | `Record<string, any>` | Optional. Custom data to pass into the dashboard modal extension. The extension can access this data using [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md). |


## Returns

```
{ modalClosed: Promise<Serializable> }
```

> **Note:** Do not use relative CSS height units such as `vh` in the extensions opened by this method. Extension heights are adjusted automatically. If your extension uses relative height units by default, make sure to turn them off. 

## Examples
> **Note:** To call this method in [self-hosted apps](https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps.md), you need to create a [client](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md). See the [setup](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) guide for more details.

### Open a modal

```js
import { dashboard } from '@wix/dashboard';

dashboard.openModal({ modalId: '1d52d058-0392-44fa-bd64-ed09275a6fcc' });
```

### Pass extra data when opening a modal

```ts
import { dashboard } from '@wix/dashboard';

dashboard.openModal({ 
  modalId: '1d52d058-0392-44fa-bd64-ed09275a6fcc', 
  params: { firstName: 'Name' } 
});
```
You can access the data passed to `openModal()` in your extension code using [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md).

### Get notified when the modal is closed
```js
import { dashboard } from '@wix/dashboard';

const { modalClosed } = dashboard.openModal({ modalId: '1d52d058-0392-44fa-bd64-ed09275a6fcc' });

modalClosed.then(result => {
  if(result) {
    console.log('The modal was closed and returned the value:', result);
  } else {
    console.log('The modal was closed without any data.'); 
  }
})
```