Modal Title
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalLabel1">Modal title</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>Modal title
I will not close if you click outside me. Don't even try to press escape key.
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="staticBackdropLabel">Modal title
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside me. Don't even try to
press
escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>Modal Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.
Lorem ipsum dolor sit amet.
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable">
Scrolling long content
</button>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1"
aria-labelledby="exampleModalScrollable" data-bs-keyboard="false"
aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="staticBackdropLabel1">Modal title
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Libero
ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
nisi
ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea
voluptatibus, ipsam quo est rerum modi quos expedita facere,
ex
tempore fuga similique ipsa blanditiis et accusamus
temporibus
commodi voluptas! Nobis veniam illo architecto expedita quam
ratione quaerat omnis. In, recusandae eos! Pariatur,
deleniti
quis ad nemo ipsam officia temporibus, doloribus fuga
asperiores
ratione distinctio velit alias hic modi praesentium aperiam
officiis eaque, accusamus aut. Accusantium assumenda,
commodi
nulla provident asperiores fugit inventore iste amet aut
placeat
consequatur reprehenderit. Ratione tenetur eligendi, quis
aperiam dolores magni iusto distinctio voluptatibus minus a
unde
at! Consequatur voluptatum in eaque obcaecati, impedit
accusantium ea soluta, excepturi, quasi quia commodi
blanditiis?
Qui blanditiis iusto corrupti necessitatibus dolorem fugiat
consequuntur quod quo veniam? Labore dignissimos reiciendis
accusamus recusandae est consequuntur iure.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
Changes</button>
</div>
</div>
</div>
</div>Modal Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable2">
Vertically centered modal
</button>
<div class="modal fade" id="exampleModalScrollable2" tabindex="-1"
aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false"
aria-hidden="true">
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="staticBackdropLabel2">Modal title
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Libero
ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
nisi
ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
Changes</button>
</div>
</div>
</div>
</div>Modal Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.
Lorem ipsum dolor sit amet.
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable3">
Vertically centered scrollable modal
</button>
<div class="modal fade" id="exampleModalScrollable3" tabindex="-1"
aria-labelledby="exampleModalScrollable3" data-bs-keyboard="false"
aria-hidden="true">
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="staticBackdropLabel3">Modal title
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea
voluptatibus, ipsam quo est rerum modi quos expedita facere,
ex
tempore fuga similique ipsa blanditiis et accusamus
temporibus
commodi voluptas! Nobis veniam illo architecto expedita quam
ratione quaerat omnis. In, recusandae eos! Pariatur,
deleniti
quis ad nemo ipsam officia temporibus, doloribus fuga
asperiores
ratione distinctio velit alias hic modi praesentium aperiam
officiis eaque, accusamus aut. Accusantium assumenda,
commodi
nulla provident asperiores fugit inventore iste amet aut
placeat
consequatur reprehenderit. Ratione tenetur eligendi, quis
aperiam dolores magni iusto distinctio voluptatibus minus a
unde
at! Consequatur voluptatum in eaque obcaecati, impedit
accusantium ea soluta, excepturi, quasi quia commodi
blanditiis?
Qui blanditiis iusto corrupti necessitatibus dolorem fugiat
consequuntur quod quo veniam? Labore dignissimos reiciendis
accusamus recusandae est consequuntur iure.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
Changes</button>
</div>
</div>
</div>
</div>Modal Title
Popover in a modal
Tooltips in a modal
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-primary-full" data-hs-overlay="#exampleModalScrollable4">
Launch demo modal
</button>
<div id="exampleModalScrollable4" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out min-h-[calc(100%-3.5rem)] flex items-center">
<div class="ti-modal-content w-full">
<div class="ti-modal-header">
<h6 class="modal-title" id="staticBackdropLabel4">Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#exampleModalScrollable4">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<h5>Popover in a modal</h5>
<div class="mb-4">This
<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
<a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-secondary me-2" href="javascript:void(0);">button
<div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
<div class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2 !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
<h6>Popover Title</h6>
</div>
<p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover body content is set in this attribute.</p>
</div>
</a>
</div>
triggers a popover on click.</div>
<hr>
<h5>Tooltips in a modal</h5>
<div>
<div class="hs-tooltip ti-main-tooltip [--placement:top]">
<p class="text-muted mb-0">
<a href="javascript:void(0);">
<span class="hs-tooltip-toggle !text-primary">
This link
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm"
role="tooltip">
Tooltip
</span>
</span>
</a>
</p>
</div> and
<div class="hs-tooltip ti-main-tooltip [--placement:top]">
<p class="text-muted mb-0"> <a href="javascript:void(0);">
<span class="hs-tooltip-toggle !text-primary">
That link
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm"
role="tooltip">
Tooltip
</span>
</span>
</a>
</p>
</div>
have tooltips on hover.
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-secondary-full" data-hs-overlay="#exampleModalScrollable4">
Close
</button>
<a class="ti-btn ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>Modal Title
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable5">
Launch demo modal
</button>
<div class="modal fade" id="exampleModalScrollable5" tabindex="-1"
aria-labelledby="exampleModalScrollable5" data-bs-keyboard="false"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="staticBackdropLabel5">Modal title
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-light border">.col-md-4</div>
<div class="col-md-4 ms-auto bg-light border">.col-md-4
.ms-auto</div>
</div>
<div class="row mt-3">
<div class="col-md-3 ms-auto bg-light border">.col-md-3
.ms-auto</div>
<div class="col-md-2 ms-auto bg-light border">.col-md-2
.ms-auto</div>
</div>
<div class="row mt-3">
<div class="col-md-6 ms-auto bg-light border">.col-md-6
.ms-auto</div>
</div>
<div class="row mt-3">
<div class="col-sm-9 bg-light border">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6 bg-light border">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 bg-light border">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
Changes</button>
</div>
</div>
</div>
</div>Modal 1
Show a second modal and hide this one with the button below.
Modal 2
Hide this modal and show the first with the button below.
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle"
role="button">Open first modal
</a>
<div class="modal fade" id="exampleModalToggle"
aria-labelledby="exampleModalToggleLabel" tabindex="-1" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalToggleLabel">Modal 1
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary"
data-bs-target="#exampleModalToggle2"
data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2"
aria-labelledby="exampleModalToggleLabel2" tabindex="-1" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalToggleLabel2">Modal 2
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle"
data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>Modal title
...
Modal title
...
Modal title
...
<button type="button" class="btn btn-primary mb-sm-0 mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalXl">Extra large modal</button>
<button type="button" class="btn btn-primary-light mb-sm-0 mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalLg">Large modal</button>
<button type="button" class="btn btn-primary-light" data-bs-toggle="modal"
data-bs-target="#exampleModalSm">Small modal</button>
<div class="modal fade" id="exampleModalXl" tabindex="-1"
aria-labelledby="exampleModalXlLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalXlLabel">Extra large
modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalLg" tabindex="-1"
aria-labelledby="exampleModalLgLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalLgLabel">Large modal
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalSm" tabindex="-1"
aria-labelledby="exampleModalSmLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalSmLabel">Small modal
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>Modal title
...
Modal title
...
Modal title
...
Modal title
...
Modal title
...
Modal title
...
<div class="bd-example">
<button type="button" class="btn btn-primary mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreen">Full screen</button>
<button type="button" class="btn btn-secondary mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
<button type="button" class="btn btn-warning mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
<button type="button" class="btn btn-info mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
<button type="button" class="btn btn-success mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
<button type="button" class="btn btn-danger mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalFullscreenXxl">Full screen below
xxl</button>
</div>
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1"
aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenLabel">Full
screen modal</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1"
aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenSmLabel">
Full
screen below sm</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1"
aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenMdLabel">
Full
screen below md</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1"
aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenLgLabel">
Full
screen below lg</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1"
aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenXlLabel">
Full
screen below xl</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1"
aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalFullscreenXxlLabel">
Full
screen below xxl</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Stacked Overlays
Modal title (level 1)
Stacked Overlays modals are a user interface design concept where multiple overlay windows, or modals, are displayed on top of each other, typically in a web or app interface. These modals are often used to present additional information, confirm actions, or to guide users through multi-step processes. The key characteristic of Stacked Overlays is their layered appearance, where each new modal partially covers the previous one, creating a stack effect. This stacking can provide a visual cue to users about the depth of their interaction or the sequence of tasks. To maintain usability, these modals are designed with careful attention to transparency, size, and the ability to easily return to previous layers. They often incorporate animations for smooth transitions between layers and may include features like dimming the background to focus user attention on the active modal.
Modal title (level 2)
Stacked Overlays modals represent a design approach in user interfaces, where several overlay windows, known as modals, are layered on top of one another. This is commonly seen in web or mobile application interfaces.
Modal title (level 3)
Stacked Overlays: UI design with layered modals, often in web/apps, where each window overlays the previous one.
<button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-stacked-overlays">
Open modal
</button>
<div id="hs-stacked-overlays" class="hs-overlay hidden ti-modal pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content pointer-events-auto">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title (level 1)
</h6>
<button type="button" class="ti-modal-close-btn !text-defaulttextcolor dark:!text-defaulttextcolor/70" data-hs-overlay="#hs-stacked-overlays">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="ti-modal-body">
<p class="mt-1 mb-2 text-gray-800 dark:text-white/70">
Stacked Overlays modals are a user interface design concept where multiple overlay windows, or modals, are displayed on top of each other, typically in a web or app interface. These modals are often used to present additional information, confirm actions, or to guide users through multi-step processes. The key characteristic of Stacked Overlays is their layered appearance, where each new modal partially covers the previous one, creating a stack effect. This stacking can provide a visual cue to users about the depth of their interaction or the sequence of tasks. To maintain usability, these modals are designed with careful attention to transparency, size, and the ability to easily return to previous layers. They often incorporate animations for smooth transitions between layers and may include features like dimming the background to focus user attention on the active modal.
</p>
<button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-stacked-overlays-2" data-hs-overlay-options='{
"isClosePrev": false
}'>
Open modal
</button>
</div>
<div class="ti-modal-footer">
<button type="button" class="ti-btn ti-btn-light" data-hs-overlay="#hs-stacked-overlays">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary-full">
Save changes
</button>
</div>
</div>
</div>
</div>
<div id="hs-stacked-overlays-2" class="hs-overlay hs-overlay-backdrop-open:bg-gray-900/70 hidden ti-modal z-[70] pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content pointer-events-auto">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title (level 2)
</h6>
<button type="button" class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-bodybg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-white/10" data-hs-overlay="#hs-stacked-overlays-2" data-hs-overlay-options='{
"isClosePrev": false
}'>
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="ti-modal-body">
<p class="mt-1 mb-2 text-gray-800 dark:text-white/70">
Stacked Overlays modals represent a design approach in user interfaces, where several overlay windows, known as modals, are layered on top of one another. This is commonly seen in web or mobile application interfaces.
</p>
<button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-stacked-overlays-3" data-hs-overlay-options='{
"isClosePrev": false
}'>
Open modal
</button>
</div>
<div class="ti-modal-footer">
<button type="button" class="ti-btn ti-btn-light" data-hs-overlay="#hs-stacked-overlays-2" data-hs-overlay-options='{
"isClosePrev": false
}'>
Close
</button>
<button type="button" class="ti-btn ti-btn-primary-full">
Save changes
</button>
</div>
</div>
</div>
</div>
<div id="hs-stacked-overlays-3" class="hs-overlay hs-overlay-backdrop-open:bg-gray-900/80 hidden ti-modal z-[80] pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box ease-out">
<div class="ti-modal-content pointer-events-auto ">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title (level 3)
</h6>
<button type="button" class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-bodybg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-white/10" data-hs-overlay="#hs-stacked-overlays-3" data-hs-overlay-options='{
"isClosePrev": false
}'>
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="ti-modal-body">
<p class="mt-1 text-gray-800 dark:text-white/70">
Stacked Overlays: UI design with layered modals, often in web/apps, where each window overlays the previous one.
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="ti-btn ti-btn-light" data-hs-overlay="#hs-stacked-overlays-3" data-hs-overlay-options='{
"isClosePrev": false
}'>
Close
</button>
<button type="button" class="ti-btn ti-btn-primary-full">
Save changes
</button>
</div>
</div>
</div>
</div>Custom backdrop color
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
<button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-custom-backdrop-modal">
Open modal
</button>
<div id="hs-custom-backdrop-modal" class="hs-overlay hs-overlay-backdrop-open:bg-primary/50 hidden ti-modal z-[80] pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content pointer-events-auto">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-custom-backdrop-modal">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="ti-modal-body">
<p class="mt-1 text-gray-800 dark:text-white/70">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white dark:bg-bodybg text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" data-hs-overlay="#hs-custom-backdrop-modal">
Close
</button>
<a class="ti-btn ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Close Buttons:
<button type="button" class="btn-close" aria-label="Close"></button><button type="button" class="btn-close" disabled aria-label="Close"></button><button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled
aria-label="Close"></button>