# Modals

**Kind**: module | **Library**: @interopio/desktop | **Access**: `io.modals`

**Source**: https://docs.interop.io/desktop/reference/javascript/modals/index.html

The [`@interopio/modals-api`](https://www.npmjs.com/package/@interopio/modals-api) library provides a way to create and manage
dialogs and alerts within the io.Connect platforms.

The Modals API is accessible via the [`io.modals`](https://docs.interop.io/desktop/reference/javascript/modals/api/index.md) object.

Available since io.Connect Desktop 9.9 and io.Connect Browser 4.0.

The following example demonstrates enabling the Modals API in an io.Connect Desktop app:

```javascript
import IODesktop from "@interopio/desktop";
import IOModals from "@interopio/modals-api";

const initializeIOConnect = async () => {

// Initializing the Modals API.
const initOptions = {
libraries: [IOModals]
};

const io = await IODesktop(initOptions);

const alertOptions = {
variant: "success",
text: "Successfully initialized the Modals API!"
};

await io.modals.alerts.request(alertOptions);
};

initializeIOConnect().catch(console.error);
```

The following example demonstrates enabling the Modals API in an io.Connect Browser app:

```javascript
import IOBrowser from "@interopio/browser";
import IOModals from "@interopio/modals-api";

const initializeIOConnect = async () => {

// Initializing the Modals API.
const initOptions = {
libraries: [IOModals]
};

const io = await IOBrowser(initOptions);

const alertOptions = {
variant: "success",
text: "Successfully initialized the Modals API!"
};

await io.modals.alerts.request(alertOptions);
};

initializeIOConnect().catch(console.error);
```

## Interfaces

- [API](https://docs.interop.io/desktop/reference/javascript/modals/api/index.md): Modals API.
- [Action](https://docs.interop.io/desktop/reference/javascript/modals/action/index.md): Describes an alert action represented as an alert button.
- [AlertRequestConfig](https://docs.interop.io/desktop/reference/javascript/modals/alertrequestconfig/index.md): Settings for displaying an alert.
- [AlertsAPI](https://docs.interop.io/desktop/reference/javascript/modals/alertsapi/index.md): The Alerts API provides a way to create and manage alerts within the io.Connect platform. There are predefined alert variants from which you can choose
- [DialogInput](https://docs.interop.io/desktop/reference/javascript/modals/dialoginput/index.md): Describes a dialog input.
- [DialogRequestConfig](https://docs.interop.io/desktop/reference/javascript/modals/dialogrequestconfig/index.md): Settings for displaying a dialog.
- [DialogResponse](https://docs.interop.io/desktop/reference/javascript/modals/dialogresponse/index.md): Describes the response returned by the platform after executing a request for displaying a dialog.
- [DialogsAPI](https://docs.interop.io/desktop/reference/javascript/modals/dialogsapi/index.md): The Dialogs API provides a way to create and manage dialogs within the io.Connect platform. There are predefined dialog templates from which you can choose
- [InteropSettings](https://docs.interop.io/desktop/reference/javascript/modals/interopsettings/index.md): Settings for assigning an Interop method to an alert action button.
- [ModalsStatus](https://docs.interop.io/desktop/reference/javascript/modals/modalsstatus/index.md): Status of the Modals API.

## Type Aliases

- [ModalsContainerType](https://docs.interop.io/desktop/reference/javascript/modals/modalscontainertype/index.md): Type of the container in which the modal will be displayed.