Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-13 05:37:04 +04:00
Code Issues Projects Releases Wiki Activity
Files
dev-dm-sans
tabler/docs/content/ui/components/modal.mdx
T

293 lines
12 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: Modal
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
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>
```
Look at the example below to see how the modal looks.
<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
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>
<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>
<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">
<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
You can use the modal to create a form. Look at the example below to see how the form looks.
<Example raw 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>
## 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" />
Reference in new issue View Git Blame Copy Permalink