tabler/docs/content/ui/components/modal.mdx

---
title: Modal
summary: A modal is a dialog shown over the page, for a confirmation, a form or other content the user has to deal with before going back to the page.
description: Create modal dialogs for notifications, confirmations, and custom content. Adjust sizes, add forms, and control them with JavaScript.
related: [/ui/components/offcanvas, /ui/components/toast]
source: core/scss/ui/_modals.scss
classnames:
  component:
    - class: modal
      desc: Container element, hidden until Bootstrap opens it
  part:
    - class: modal-dialog
      desc: Positions and sizes the dialog inside the container
    - class: modal-content
      desc: The visible panel
    - class: modal-header
      desc: Title bar, usually with the close button
    - class: modal-title
      desc: Heading inside the header
    - class: modal-body
      desc: Content area
    - class: modal-footer
      desc: Row of actions at the bottom
    - class: modal-status
      desc: Colored bar across the top edge, tinted with a bg-{color} utility
  style:
    - class: modal-blur
      desc: Blurs the page behind the dialog instead of only dimming it
  modifier:
    - class: modal-dialog-centered
      desc: Centers the dialog vertically
    - class: modal-dialog-scrollable
      desc: Scrolls the body instead of the whole page
    - class: modal-full-width
      desc: Lets the dialog use the full viewport width
    - class: modal-fullscreen
      desc: Fills the viewport; modal-fullscreen-{breakpoint}-down only below that width
  size:
    - class: modal-sm
      desc: Small dialog
    - class: modal-lg
      desc: Large dialog
    - class: modal-xl
      desc: Extra large dialog
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.

## Default markup

To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal's header, body, and footer.

```html
<div class="modal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">...</div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>
```

<Example centered>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<div class="modal" id="exampleModal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. </div>
      <div class="modal-footer">
        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>
</Example>

## Prompt and alert

A modal also works as a prompt or an alert: a short message with one or two buttons.

<Example raw>
<div class="modal" id="exampleModal2" tabindex="-1">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-danger"></div>
      <div class="modal-body text-center py-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M12 9v2m0 4v.01" />
          <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
        </svg>
        <h3>Are you sure?</h3>
        <div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col">
              <a href="#" class="btn w-100" data-bs-dismiss="modal">Cancel</a>
            </div>
            <div class="col">
              <a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">Delete 84 items</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</Example>

<Example raw>
<div class="modal" id="exampleModal3" tabindex="-1">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-success"></div>
      <div class="modal-body text-center py-4">
        <Icon name="circle-check" class="mb-2 text-green icon-lg" />
        <h3>Payment succeeded</h3>
        <div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col">
              <a href="#" class="btn w-100" data-bs-dismiss="modal">Go to dashboard</a>
            </div>
            <div class="col">
              <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">View invoice</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</Example>

## Modal with form

A form inside a modal keeps the user on the page. Put the fields in the body and the submit button in the footer.

<Example raw class="px-5">
<div class="modal" id="exampleModal4" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">New report</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Name</label>
          <input type="text" class="form-control" name="example-text-input" placeholder="Your report name" />
        </div>
        <label class="form-label">Report type</label>
        <div class="form-selectgroup-boxes row mb-3">
          <div class="col-md-6">
            <label class="form-selectgroup-item">
              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked />
              <span class="form-selectgroup-label d-flex align-items-center p-3">
                <span class="me-3"><span class="form-selectgroup-check"></span></span>
                <span class="form-selectgroup-label-content">
                  <span class="form-selectgroup-title strong mb-1">Simple</span>
                  <span class="d-block text-secondary"> Provide only basic data needed for the report </span>
                </span>
              </span>
            </label>
          </div>
          <div class="col-md-6">
            <label class="form-selectgroup-item">
              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
              <span class="form-selectgroup-label d-flex align-items-center p-3">
                <span class="me-3"><span class="form-selectgroup-check"></span></span>
                <span class="form-selectgroup-label-content">
                  <span class="form-selectgroup-title strong mb-1">Advanced</span>
                  <span class="d-block text-secondary"> Insert charts and additional advanced analyses to be inserted in the report </span>
                </span>
              </span>
            </label>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <div class="mb-3">
              <label class="form-label">Report url</label>
              <div class="input-group input-group-flat">
                <span class="input-group-text">https://tabler.io/reports/</span>
                <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="mb-3">
              <label class="form-label">Visibility</label>
              <select class="form-select">
                <option value="1" selected>Private</option>
                <option value="2">Public</option>
                <option value="3">Hidden</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label">Client name</label>
              <input type="text" class="form-control" />
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label">Reporting period</label>
              <input type="date" class="form-control" />
            </div>
          </div>
          <div class="col-lg-12">
            <div>
              <label class="form-label">Additional information</label>
              <textarea class="form-control" rows="3"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</a>
        <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"> <Icon name="plus" /> Create new report </a>
      </div>
    </div>
  </div>
</div>
</Example>

## Blurred backdrop

Add `modal-blur` next to `modal` to blur the page behind the dialog instead of only dimming it.

```html
<div
  class="modal modal-blur fade"
  id="modal-blurred"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
>
  <!-- modal-dialog -->
</div>
```

## Full width modal

Add `modal-full-width` to the `modal-dialog` to let the dialog use the whole viewport width, minus the usual margin. Use it for content that needs the room, such as a wide table or a side-by-side comparison.

The Bootstrap size classes cover the smaller steps: `modal-sm`, `modal-lg` and `modal-xl`.

```html
<div class="modal-dialog modal-full-width modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Full width modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">Content</div>
  </div>
</div>
```

## Accessibility

- Set `tabindex="-1"` on the modal and point `aria-labelledby` at the title. Bootstrap then moves focus into the dialog, traps it while the dialog is open, and returns it to the trigger on close.
- Give every modal a visible title. A dialog with no accessible name is announced as just "dialog".
- Keep the close button labelled. `btn-close` has no text of its own, so it needs `aria-label="Close"`.
- Do not open a modal from inside another modal. Bootstrap supports one dialog at a time and the focus trap follows the last one opened.
- A modal that must not be dismissed by accident takes `data-bs-backdrop="static"`, but never remove the close control entirely - <kbd>Escape</kbd> is the only way out for many keyboard users.

## SCSS variables

Use these SCSS variables to customize modals. The default values are:

<CodeDocs name="modal-variables" file="core/scss/_variables.scss" />