Modal & Closes
- Advanced Ui
- Modal & Closes
Basic Modal
Launch demo modal
Modal title
...
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#todo-compose">Launch demo modal
</a>
<div id="todo-compose" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold" id="mail-ComposeLabel">Modal title</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" data-hs-overlay="#todo-compose">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
...
</div>
<div class="ti-modal-footer">
<button type="button"
class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full align-middle"
data-hs-overlay="#todo-compose">
Close
</button>
<button type="button" class="ti-btn btn-wave bg-primary text-white !font-medium">Save Changes</button>
</div>
</div>
</div>
</div>
Static backdrop
Launch static backdrop modal
Modal title
I will not close if you click outside me. Don't even try to press escape key.
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full " data-hs-overlay="#staticBackdrop">Launch static backdrop modal
</a>
<div id="staticBackdrop" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold">Modal title</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" data-hs-overlay="#staticBackdrop">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<p>I will not close if you click outside me. Don't even try to
press
escape key.</p>
</div>
<div class="ti-modal-footer">
<button type="button"
class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full align-middle"
data-hs-overlay="#staticBackdrop
">
Close
</button>
<button type="button" class="ti-btn btn-wave bg-primary text-white !font-medium">Understood</button>
</div>
</div>
</div>
</div>
Scrolling long content
Scrolling long content
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.
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#exampleModalScrollable"> Scrolling long content
</a>
<div id="exampleModalScrollable" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold">Modal title</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" data-hs-overlay="#exampleModalScrollable">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<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="ti-modal-footer">
<button type="button"
class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full align-middle"
data-hs-overlay="#exampleModalScrollable
">
Close
</button>
<button type="button" class="ti-btn btn-wave bg-primary text-white !font-medium">Save Changes</button>
</div>
</div>
</div>
</div>
Vertically centered modal
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="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-vertically-centered-modal">
Vertically centered modal
</button>
<div id="hs-vertically-centered-modal" 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">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold" id="staticBackdropLabel2">Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-vertically-centered-modal">
<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">
<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="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-vertically-centered-modal">
Close
</button>
<a class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Vertical Centered Scrollable
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="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
Vertically centered scrollable modal
</button>
<div id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold" id="staticBackdropLabel3">Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
<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">
<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="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
Close
</button>
<a class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Tooltips and popovers
Modal title
Popover in a modal
This
triggers a popover on click.
Tooltips in a modal
and
have tooltips on hover.
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave 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 text-[1rem] font-semibold" 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 btn-wave 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 btn-wave ti-btn-secondary-full" data-hs-overlay="#exampleModalScrollable4">
Close
</button>
<a class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Using the grid
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#exampleModalgrid">
Launch demo modal
</button>
<div id="exampleModalgrid" 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 text-[1rem] font-semibold">Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#exampleModalgrid">
<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">
<div class="container-fluid">
<div class="grid grid-cols-3 gap-4">
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">01</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">02</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">03</div>
<div class="col-span-2 rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">04</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">05</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">06</div>
<div class="col-span-2 rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">07</div>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#exampleModalgrid">
Close
</button>
<a class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Toggle between modals
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.
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-toggle-between-modals-first-modal">
Open first modal
</button>
<div id="hs-toggle-between-modals-first-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal 1
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-toggle-between-modals-first-modal" data-hs-overlay-close>
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
Show a second modal and hide this one with the button below.
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-toggle-between-modals-second-modal">
Open second modal
</button>
</div>
</div>
</div>
</div>
<div id="hs-toggle-between-modals-second-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal 2
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-toggle-between-modals-second-modal" data-hs-overlay-close>
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
Hide this modal and show the first with the button below.
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-toggle-between-modals-first-modal">
Back to first
</button>
</div>
</div>
</div>
</div>
Optional sizes
Modal title
...
Modal title
...
Modal title
...
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-extralarge-modal">
Extra Large modal
</button>
<div id="hs-extralarge-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-extralarge-modal">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
</div>
</div>
</div>
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-large-modal">
Large modal
</button>
<div id="hs-large-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out md:!max-w-2xl md:w-full m-3 md:mx-auto">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-large-modal">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
</div>
</div>
</div>
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-small-modal">
small modal
</button>
<div id="hs-small-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-small-modal">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
</div>
</div>
</div>
Modal With Slide Down Animation
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-slide-down-animation-modal">
Open modal
</button>
<div id="hs-slide-down-animation-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3> class="ti-modal-title">
Modal title
</h3>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-slide-down-animation-modal">
<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"></path>
</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 btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-slide-down-animation-modal">
Close
</button>
<a> class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Modal With Slide Up Animation
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full"
data-hs-overlay="#hs-slide-up-animation-modal">
Open modal
</button>
<div id="hs-slide-up-animation-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:!mt-7 !mt-14 ease-out ti-modal-box">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3 class="ti-modal-title">
Modal title
</h3>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-slide-up-animation-modal">
<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"></path>
</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 btn-wave ti-btn-secondary-full"
data-hs-overlay="#hs-slide-up-animation-modal">
Close
</button>
<a class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Modal Focus Management
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-focus-management-modal">
Open modal
</button>
<div id="hs-focus-management-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3> class="ti-modal-title">
Modal title
</h3>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-focus-management-modal">
<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"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<label> for="input-label" class="ti-form-label">Email</label>
<input type="email" id="input-label" class="ti-form-input" placeholder="you@site.com" autofocus="">
</div>
<div class="ti-modal-footer">
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-focus-management-modal">
Close
</button>
<a> class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</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 btn-wave 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">
<h3 class="ti-modal-title">
Modal title (level 1)
</h3>
<button type="button" class="ti-modal-close-btn" 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>
<path d="m6 6 12 12"></path>
</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 btn-wave 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="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full"
data-hs-overlay="#hs-stacked-overlays">
Close
</button>
<button type="button" class="ti-btn btn-wave 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">
<h3 class="ti-modal-title">
Modal title (level 2)
</h3>
<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>
<path d="m6 6 12 12"></path>
</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 btn-wave 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="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full"
data-hs-overlay="#hs-stacked-overlays-2" data-hs-overlay-options="{
"isClosePrev": false
}">
Close
</button>
<button type="button" class="ti-btn btn-wave 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">
<h3 class="ti-modal-title">
Modal title (level 3)
</h3>
<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>
<path d="m6 6 12 12"></path>
</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="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full"
data-hs-overlay="#hs-stacked-overlays-3" data-hs-overlay-options="{
"isClosePrev": false
}">
Close
</button>
<button type="button" class="ti-btn btn-wave 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 btn-wave 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">
<h3> class="ti-modal-title">
Modal title
</h3>
<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>
<path> d="m6 6 12 12"></path>
</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 hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full"
data-hs-overlay="#hs-custom-backdrop-modal">
Close
</button>
<a> class="ti-btn btn-wave ti-btn-primary-full" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Fullscreen modal
Full screen Modal
...
Full screen below sm
...
Full screen below md
...
Full screen below lg
...
Full screen below xl
...
Full screen below xxl
...
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-full-screen-modal">
Full screen
</button>
<div id="hs-full-screen-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !m-0 !max-w-full !w-full">
<div class="ti-modal-content !rounded-none">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal-below-sm">
Full screen below sm
</button>
<div id="hs-full-screen-modal-below-sm" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 max-w-full w-full !m-0 sm:hs-overlay-open:!mt-10 sm:!mt-0 sm:max-w-lg sm:!mx-auto">
<div class="ti-modal-content sm:border sm:rounded-sm sm:shadow-sm dark:bg-bodybg sm:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-sm">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-warning-full" data-hs-overlay="#hs-full-screen-modal-below-md">
Full screen below md
</button>
<div id="hs-full-screen-modal-below-md" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 md:hs-overlay-open:!mt-10 md:!mt-0 md:!max-w-lg md:!mx-auto">
<div class="ti-modal-content md:border md:rounded-sm md:shadow-sm md:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-md">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal-below-lg">
Full screen below lg
</button>
<div id="hs-full-screen-modal-below-lg" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 lg:hs-overlay-open:!mt-10 lg:!mt-0 lg:!max-w-lg lg:!mx-auto">
<div class="ti-modal-content lg:border lg:rounded-sm lg:shadow-sm lg:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-lg">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-success-full" data-hs-overlay="#hs-full-screen-modal-below-xl">
Full screen below xl
</button>
<div id="hs-full-screen-modal-below-xl" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 xl:hs-overlay-open:!mt-10 xl:!mt-0 xl:!max-w-xl xl:!mx-auto">
<div class="ti-modal-content xl:border xl:rounded-sm xl:shadow-sm xl:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-xl">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-danger-full" data-hs-overlay="#hs-full-screen-modal-below-xxl">
Full screen below xxl
</button>
<div id="hs-full-screen-modal-below-xxl" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 xxl:hs-overlay-open:!mt-10 xxl:!mt-0 xxl:!max-w-xl xxl:!mx-auto">
<div class="ti-modal-content xxl:border xxl:rounded-sm xxl:shadow-sm xxl:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-xl">
<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">
<p class="mt-1 text-gray-800 dark:text-[#8c9097] dark:text-white/50">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>Close Buttons:
Basic Close
<button type="button" class="hs-dropdown-toggle !text-[1.5rem] !font-medium text-[#8c9097] dark:text-white/50 hover:text-defaulttextcolor" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
Disabel state
<button type="button" class="hs-dropdown-toggle !text-[1.5rem] !font-medium text-[#8c9097] dark:text-white/50/25 pointer-events-none" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
White variant
<button type="button" class="hs-dropdown-toggle !text-[1.5rem] !font-medium text-[#8c9097] dark:text-white/50 hover:text-[#8c9097]" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
<button type="button" class="hs-dropdown-toggle !text-[1.5rem] !font-medium text-[#8c9097] dark:text-white/50/25 pointer-events-none" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>