docs/pages/ui/components/modal.mdx - dev - githubmirror/tabler

docs/pages/ui/components/modal.mdx
59 строк8 KB
Paweł Kuna
Generate SCSS and JS docs snippets from source markers (#2798)
05 авг 2026, 19:44
05 авг 2026, 19:449c4dc73
---
title: Modal
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
description: Dialogs for notifications and content.
layout: '@layouts/DocsMdxLayout.astro'
---
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>
```

Look at the example below to see how the modal looks.

<Example centered bg="surface-secondary">
<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

You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.

<Example raw bg="surface-secondary">
<div class="modal" id="exampleModal" 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 bg="surface-secondary">
<div class="modal" id="exampleModal" 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"> <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green 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" /> <circle cx="12" cy="12" r="9" /> <path d="M9 12l2 2l4 -4" /> </svg> <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

You can use the modal to create a form. Look at the example below to see how the form looks.

<Example raw bg="surface-secondary" class="px-5">
<div class="modal" id="exampleModal" 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>

## SCSS variables

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

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