> For the complete documentation index, see [llms.txt](https://docs.criticalmoments.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.criticalmoments.io/actions-in-app-messaging/modals.md).

# Modals

Modals are a pop-over UIs that can be used to present your users with information, or several options in the form of buttons. The modal UI covers the entire app. 

* Powerful configuration-driven UI with support for typography, buttons, images, and symbols  
* Theme support to make the modal feel native to your app/brand look, including dark mode
* Rich "action" system: buttons can launch other CriticalMoments actions (links, banners) or deep link into native actions in your app

### Examples

<figure><img src="/files/PnJnvOU6J78435Lda0MS" alt=""><figcaption><p>Dark mode with purple accent color, light mode, and a custom theme</p></figcaption></figure>

These examples are all available in our Sample App, including config.

### Config Structure

Modals are configured as [named actions](/actions-in-app-messaging/actions-overview.md) of the type `modal` .

The `actionData` block has the following options:

* `showCloseButton` \[bool, optional, default true]: if explicitly set to false, will hide the close button of the modal, and disable any system gestures to dismiss the modal. This forces the user to use a button to dismiss. If used, you should have at least 1 button so it's possible to close the modal.
* `themeName` \[string, optional]: a theme name to use for this modal, overriding the default theme. See named themes in [Themes](/themes/theme-overview.md). Note: typically you should set one "defaultTheme" in the theme config to be shared by all UI, and not need a customThemeName per modal; this option is available if you need one modal to have a different style.
* `content` \[object, required]
  * `pageType` \[string, required]: always the value `stack`. In the future more layouts may be added.
  * `pageData` \[object, required]
    * `sections` \[array, required]: Sections define the content of your modal's view (above the buttons). At least one section is required. See [documentation for the sections available](/actions-in-app-messaging/modals/modal-content-sections.md).
    * `buttons` \[array, optional]: If specified, these buttons will appear on the bottom of the modal. See [the documentation for the buttons](/actions-in-app-messaging/modals/modal-buttons.md).

### Sample Config

Sample confguration for the left most example above, including a "More info" button which launches the brower to provide more information. Our sample app has the config for all of the examples above, and more.

```json
"simpleModalAction": {
    "actionType": "modal",
    "actionData": {
        "content": {
            "pageType": "stack",
            "pageData": {
                "sections": [
                    {
                        "pageSectionType": "image",
                        "pageSectionData": {
                            "imageType": "sf_symbol",
                            "height": 60.0,
                            "imageData": {
                                "symbolName": "coloncurrencysign.square.fill",
                                "weight": "light",
                                "mode": "hierarchical"
                            }
                        }
                    },
                    {
                        "pageSectionType": "title",
                        "pageSectionData": {
                            "title": "Important Announcement"
                        }
                    },
                    {
                        "pageSectionType": "title",
                        "topSpacingScale": 1.5,
                        "pageSectionData": {
                            "title": "New pricing coming soon.",
                            "scaleFactor": 0.64
                        }
                    },
                    {
                        "pageSectionType": "body",
                        "topSpacingScale": 4,
                        "pageSectionData": {
                            "bodyText": "Your free plan won't be impacted! However, if you want to upgrade to 'Pro' now is your last chance to lock in our current pricing."
                        }
                    }
                ],
                "buttons": [
                    {
                        "title": "Got it!",
                        "style": "large"
                    },
                    {
                        "title": "More info",
                        "preventDefault": true,
                        "style": "info",
                        "actionName": "web_link_action"
                    }
                ]
            }
        }
    }
}
```