Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity
Files
9be6ea257c331a126ffab5706fedda06070ef67a
tabler/docs/ui/components/modals.mdx
codecalm 9be6ea257c remove unused cofig from code
2025-01-03 02:43:09 +01:00

223 lines
8.9 KiB
Plaintext
Raw 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: Modals
description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
---
## Default markup
```html example centered height="30rem"
<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>
```
## Prompt and alert
```html example centered height="30rem"
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch alert modal
</button>
<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>
```
```html example centered height="30rem"
<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 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 succedeed</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>
```
## Modal with form
```html example centered height="30rem"
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch modal with form
</button>
<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">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" 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>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
Create new report
</a>
</div>
</div>
</div>
</div>
```
Reference in New Issue View Git Blame Copy Permalink