# Modal

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/modal/)

### Available Properties:

* `size`: Sets the size of the modal. Accepts 'sm', 'lg', 'xl', or 'fullscreen'.
* `id`: The unique identifier for the modal. A random ID is generated if not specified.
* `title_id`: The unique identifier for the modal title. A random ID is generated if not specified.
* `fullscreen_responsive`: Makes the modal fullscreen on specified breakpoints. Options are `'sm'`, `'md',` `'lg',` `'xl',` `'xxl'`
* `static_backdrop`: If true, clicking the backdrop does not close the modal.
* `vertically_centered`: If true, centers the modal vertically in the viewport.
* `scrollable`: If true, makes the modal's body scrollable if the content overflows.
* `header`: Content for the modal's header, can be plain text or HTML.
* `body`: The main content of the modal, can contain text, forms, or any HTML content.
* `footer`: Content for the modal's footer, typically used for buttons or secondary information.
* `title_tag`: The HTML tag for the modal title. Default is `h5`.
* `close_button`: If true, displays a close button in the modal header.
* `animation`: The animation effect for the modal. Options are `fade`, `slide`, or `none`.
* `keyboard`: If true, the modal can be closed by pressing the escape key.
* `modal_attributes`: A list of HTML attributes for the modal.
* `modal_dialog_attributes`: A list of HTML attributes for the modal dialog.
* `modal_header_attributes`: A list of HTML attributes for the modal header.
* `modal_title_attributes`: A list of HTML attributes for the modal title.
* `modal_body_attributes`: A list of HTML attributes for the modal body.
* `close_button_attributes`: A list of HTML attributes for the close button.
* `modal_utility_classes`: An array of utility classes for additional styling.
* `modal_dialog_utility_classes`: An array of utility classes for additional styling on the modal dialog.
* `modal_header_classes`: An array of utility classes for additional styling on the modal header.
* `modal_title_utility_classes`: An array of utility classes for additional styling on the modal title.
* `modal_body_utility_classes`: An array of utility classes for additional styling on the modal body.
* `modal_footer_utility_classes`: An array of utility classes for additional styling on the modal footer.

### Available Slots:

* `modal_header`: Content for the modal header.
* `modal_body`: Content for the modal body.
* `modal_footer`: Content for the modal footer.

### Examples

**Example #1:** A basic modal with a header, body, and footer.

```twig
{% include 'radix:modal' with {
  header: 'Modal Title',
  body: 'The modal content that goes here.',
  footer: 'Modal footer text goes here.',
  static_backdrop: true,
  close_button: true,
  vertically_centered: true,
  id: 'modal-login',
  size: 'lg',
  title_tag: 'h3',
  modal_dialog_utility_classes: [
    'text-center',
  ],
  modal_header_utility_classes: [
    'border-bottom-0',
    'p-3',
  ],
  modal_title_utility_classes: [
    'fs-2',
  ],
  modal_body_utility_classes: [
    'py-4', 
    'px-lg-9',
  ],
  close_button_utility_classes: [
    'rounded-5',
    'bg-gray',
    'p-2',
  ],
  modal_footer_utility_classes: [
    'border-top-0',
    'p-3',
  ]
} %}
```

**Example #2**: Here's the example for the button triggering the modal:

```twig
{% include 'radix:button' with {
  color: 'primary',
  outline: true,
  id: 'modal-login',
  content: 'Button text',
  button_attributes: create_attribute().setAttribute('data-bs-toggle', 'modal').setAttribute('data-bs-target', '#modal-login'),
  button_utility_classes: [
    'mb-2',
    'mb-md-0',
    'btn-outline-white',
  ]
} %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.