---
title: Modal
description: >-
  The Modal API allows you to display an overlay that prevents interaction with
  the rest of the app until dismissed.
api_name: app-bridge-library
source_url:
  html: 'https://shopify.dev/docs/api/app-bridge-library/apis/modal'
  md: 'https://shopify.dev/docs/api/app-bridge-library/apis/modal.md'
---

# Modal

The Modal API allows you to display an overlay that prevents interaction with the rest of the app until dismissed.

## Modal

The `modal` API provides a `show` method to display a Modal, a `hide` method to hide a Modal, and a `toggle` method to toggle the visibility of a Modal. These are used in conjunction with the [`ui-modal` element](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal). They are alternatives to the `show`, `hide`, and `toggle` instance methods.

* hide

  (id: string) => Promise\<void>

  Hides the modal element. An alternative to the `hide` instance method on the `ui-modal` element.

* show

  (id: string) => Promise\<void>

  Shows the modal element. An alternative to the `show` instance method on the `ui-modal` element.

* toggle

  (id: string) => Promise\<void>

  Toggles the modal element visibility. An alternative to the `toggle` instance method on the `ui-modal` element.

### Examples

* #### Modal

  ##### Modal

  ```html
  <ui-modal id="my-modal">
    <p>Hello, World!</p>
  </ui-modal>

  <button onclick="shopify.modal.show('my-modal')">Open Modal</button>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/app-bridge-library/modal.png)

## Related

[Component - ui-modal](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal)

[Component - Modal](https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component)