## Modal  
Use Modal component to show a dialog box or a popup window on the top of the current page.  
Category: Overlay  

### Simple Example

This is a basic example of dmc.Modal. You can also customize it by setting the desired `radius` or `padding`.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

component = html.Div(
    [
        dmc.Button("Open Modal", id="modal-demo-button"),
        dmc.Modal(
            title="New Modal",
            id="modal-simple",
            children=[
                dmc.Text("I am in a modal component."),
                dmc.Space(h=20),
                dmc.Group(
                    [
                        dmc.Button("Submit", id="modal-submit-button"),
                        dmc.Button(
                            "Close",
                            color="red",
                            variant="outline",
                            id="modal-close-button",
                        ),
                    ],
                    justify="flex-end",
                ),
            ],
        ),
    ]
)


@callback(
    Output("modal-simple", "opened"),
    Input("modal-demo-button", "n_clicks"),
    Input("modal-close-button", "n_clicks"),
    Input("modal-submit-button", "n_clicks"),
    State("modal-simple", "opened"),
    prevent_initial_call=True,
)
def modal_demo(nc1, nc2, nc3, opened):
    return not opened
```
### Different Sizes

Set the size of the modal using the `size` prop.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

component = html.Div(
    [
        dmc.Modal(title="Size: lg", id="modal-size-lg", size="lg"),
        dmc.Modal(title="Size: 378px", id="modal-size-378", size=378),
        dmc.Modal(title="Size: 55%", id="modal-size-55", size="55%"),
        dmc.Modal(title="Size: full", id="modal-size-full", fullScreen=True),
        dmc.Group(
            [
                dmc.Button("lg", id="lg-modal-button"),
                dmc.Button("378px", id="378-modal-button"),
                dmc.Button("55%", id="55-modal-button"),
                dmc.Button("full", id="full-modal-button"),
            ]
        ),
    ]
)


def toggle_modal(n_clicks, opened):
    return not opened


for size in ["lg", "378", "55", "full"]:
    callback(
        Output(f"modal-size-{size}", "opened"),
        Input(f"{size}-modal-button", "n_clicks"),
        State(f"modal-size-{size}", "opened"),
        prevent_initial_call=True,
    )(toggle_modal)
```
### Vertically Centered Modal

To vertically center the modal, set `centered=True`.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

component = html.Div(
    [
        dmc.Modal(
            title="Centered Modal",
            id="modal-centered",
            centered=True,
            children=[dmc.Text("This is a vertically centered modal.")],
        ),
        dmc.Button("Open modal", id="modal-centered-button"),
    ]
)


@callback(
    Output("modal-centered", "opened"),
    Input("modal-centered-button", "n_clicks"),
    State("modal-centered", "opened"),
    prevent_initial_call=True,
)
def toggle_modal(n_clicks, opened):
    return not opened
```
### Modal With Scroll

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

paragraph = (
    """Dash apps give a point-&-click interface to models written in Python, vastly expanding the notion of what's 
        possible in a traditional 'dashboard.' With Dash apps, data scientists and engineers put complex Python analytics 
        in the hands of business decision-makers and operators. """
    * 10
)

component = html.Div(
    [
        dmc.Modal(
            id="modal-scroll",
            title="Modal with Scroll",
            children=[dmc.Text(paragraph)],
        ),
        dmc.Button("Modal with Scroll", id="modal-scroll-button"),
    ]
)


@callback(
    Output("modal-scroll", "opened"),
    Input("modal-scroll-button", "n_clicks"),
    State("modal-scroll", "opened"),
    prevent_initial_call=True,
)
def toggle_modal(n_clicks, opened):
    return not opened
```
### Modal Stack

Use `ModalStack` component to render multiple modals at the same time. `ModalStack` keeps track of opened modals, 
manages `z-index` values, focus trapping and `closeOnEscape` behavior.

Differences from using multiple Modal components:

- `ModalStack` children must be `ManagedModal` components
- `ModalStack` manages `z-index` values – modals that are opened later will always have higher `z-index` value disregarding their order in the DOM
- `ModalStack` disables focus trap and `Escape` key handling for all modals except the one that is currently opened
- Modals that are not currently visible are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none`
- Only one overlay is rendered at a time


```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback, ctx, no_update


component = dmc.Center([
    dmc.ModalStack(
        id="modal-stack",
        children=[
            dmc.ManagedModal(
                id="delete-page",
                title="Delete this page?",
                children=[
                    dmc.Text("Are you sure you want to delete this page? This action cannot be undone."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-1", variant="default"),
                            dmc.Button("Delete", id="delete", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedModal(
                id="confirm-action",
                title="Confirm action",
                children=[
                    dmc.Text("Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-2", variant="default"),
                            dmc.Button("Confirm", id="confirm", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedModal(
                id="really-confirm-action",
                title="Really confirm action",
                children=[
                    dmc.Text("Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?"),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-3", variant="default"),
                            dmc.Button("Confirm", id="final-confirm", color="red"),
                        ],
                    ),
                ],
            ),
        ]
    ),
    dmc.Button("Open modal", id="open")
])


@callback(
    Output("modal-stack", "open"),
    Output("modal-stack", "closeAll"),
    Input("open", "n_clicks"),
    Input("cancel-1", "n_clicks"),
    Input("cancel-2", "n_clicks"),
    Input("cancel-3", "n_clicks"),
    Input("delete", "n_clicks"),
    Input("confirm", "n_clicks"),
    Input("final-confirm", "n_clicks"),
    prevent_initial_call=True,
)
def control_modals(*_):
    trigger = ctx.triggered_id
    if trigger == "open":
        return "delete-page", False
    if trigger in ("cancel-1", "cancel-2", "cancel-3", "final-confirm"):
        return None, True
    if trigger == "delete":
        return "confirm-action", False
    if trigger == "confirm":
        return "really-confirm-action", False
    return no_update, no_update
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name    | Static selector        | Description                                                           |
|:--------|:-----------------------|:----------------------------------------------------------------------|
| root    | .mantine-Modal-root    | Root element                                                          |
| inner   | .mantine-Modal-inner   | Element used to center modal, has fixed position, takes entire screen |
| content | .mantine-Modal-content | `Modal.Content` root element                                          |
| header  | .mantine-Modal-header  | Contains title and close button                                       |
| overlay | .mantine-Modal-overlay | Overlay displayed under the `Modal.Content`                           |
| title   | .mantine-Modal-title   | Modal title (h2 tag), displayed in the header                         |
| body    | .mantine-Modal-body    | Modal body, displayed after header                                    |
| close   | .mantine-Modal-close   | Close button                                                          |


### Keyword Arguments
#### Modal

- children (a list of or a singular dash component, string or number; optional):
    Modal content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- centered (boolean; optional):
    Determines whether the modal should be centered vertically,
    `False` by default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

    `closeButtonProps` is a dict with keys:

- closeOnClickOutside (boolean; optional):
    Determines whether the modal/drawer should be closed when user
    clicks on the overlay, `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether `onClose` should be called when user presses
    the escape key, `True` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fullScreen (boolean; optional):
    Determines whether the modal should take the entire screen,
    `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- keepMounted (boolean; optional):
    If set modal/drawer will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead, `False` by
    default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- lockScroll (boolean; optional):
    Determines whether scroll should be locked when `opened={True}`,
    `True` by default.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- opened (boolean; default False):
    Determines whether modal/drawer is opened.

- overlayProps (dict; optional):
    Props passed down to the `Overlay` component, use to configure
    opacity, `background-color`, styles and other properties.

    `overlayProps` is a dict with keys:

- padding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set content,
    header and footer padding, `'md'` by default.

- portalProps (dict; optional):
    Props passed down to the Portal component when `withinPortal` is
    set.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- removeScrollProps (dict; optional):
    Props passed down to react-remove-scroll, can be used to customize
    scroll lock behavior.

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the last active
    element when `onClose` is called, `True` by default.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by
    default.

- size (number; optional):
    Controls width of the content area, `'md'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- title (a list of or a singular dash component, string or number; optional):
    Modal title.

- transitionProps (dict; optional):
    Props added to the `Transition` component that used to animate
    overlay and body, use to configure duration and animation type, `{
    duration: 200, transition: 'pop' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped, `True` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCloseButton (boolean; optional):
    Determines whether the close button should be rendered, `True` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be rendered, `True` by
    default.

- withinPortal (boolean; optional):
    Determines whether the component should be rendered inside
    `Portal`, `True` by default.

- xOffset (string | number; optional):
    Left/right modal offset, `5vw` by default.

- yOffset (string | number; optional):
    Top/bottom modal offset, `5dvh` by default.

- zIndex (string | number; optional):
    `z-index` CSS property of the root element, `200` by default.
#### ModalStack

- children (list of dicts; optional):
    ManagedModal content.

    `children` is a list of dicts with keys:

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- close (string | list of strings; optional):
    Closes one or more modals by ID. Accepts a single ID (string or
    dict) or a list of IDs.

- closeAll (boolean; optional):
    Closes all modals in the ModalStack.

- data-* (string; optional):
    Wild card data attributes.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- open (string | list of strings; optional):
    Opens one or more modals by ID. Accepts a single ID (string or
    dict) or a list of IDs.

- state (dict; optional):
    Current opened state of each modal. Read only.

    `state` is a dict with keys:

- tabIndex (number; optional):
    tab-index.

- toggle (string | list of strings; optional):
    Toggles one or more modals by ID. Accepts a single ID (string or
    dict) or a list of IDs.
#### ManagedModal

> Note:  ManagedModal is for use in the ModalStack component. id is required.  open/closed state is controlled by ModalStack.

- children (a list of or a singular dash component, string or number; optional):
    Modal content.

- id (string; required):
    Unique ID to identify this component. Required for use with
    StackModal.

- aria-* (string; optional):
    Wild card aria attributes.

- centered (boolean; optional):
    Determines whether the modal should be centered vertically,
    `False` by default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

    `closeButtonProps` is a dict with keys:

- closeOnClickOutside (boolean; optional):
    Determines whether the modal/drawer should be closed when user
    clicks on the overlay, `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether `onClose` should be called when user presses
    the escape key, `True` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fullScreen (boolean; optional):
    Determines whether the modal should take the entire screen,
    `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- keepMounted (boolean; optional):
    If set modal/drawer will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead, `False` by
    default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- lockScroll (boolean; optional):
    Determines whether scroll should be locked when `opened={True}`,
    `True` by default.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- overlayProps (dict; optional):
    Props passed down to the `Overlay` component, use to configure
    opacity, `background-color`, styles and other properties.

    `overlayProps` is a dict with keys:

- padding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set content,
    header and footer padding, `'md'` by default.

- portalProps (dict; optional):
    Props passed down to the Portal component when `withinPortal` is
    set.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- removeScrollProps (dict; optional):
    Props passed down to react-remove-scroll, can be used to customize
    scroll lock behavior.

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the last active
    element when `onClose` is called, `True` by default.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by
    default.

- size (number; optional):
    Controls width of the content area, `'md'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- title (a list of or a singular dash component, string or number; optional):
    Modal title.

- transitionProps (dict; optional):
    Props added to the `Transition` component that used to animate
    overlay and body, use to configure duration and animation type, `{
    duration: 200, transition: 'pop' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped, `True` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCloseButton (boolean; optional):
    Determines whether the close button should be rendered, `True` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be rendered, `True` by
    default.

- withinPortal (boolean; optional):
    Determines whether the component should be rendered inside
    `Portal`, `True` by default.

- xOffset (string | number; optional):
    Left/right modal offset, `5vw` by default.

- yOffset (string | number; optional):
    Top/bottom modal offset, `5dvh` by default.

- zIndex (string | number; optional):
    `z-index` CSS property of the root element, `200` by default.