Basic example

Modals are separate windows within an application, most often as a dialog box. They are a common user interface pattern for providing information or requiring confirmation.

Basic example 
<button type="button" class="btn bg-blue-600/90 text-md text-white hover:bg-blue-600" data-tb-modal="#modal-basic">
    Launch demo modal
</button>

<div data-tb-modal-window id="modal-basic" tabindex="-1" aria-hidden="true">
    <div data-tb-modal-dialog class="p-5">
        <div class="relative mb-5">
            <h5 class="text-lg font-bold leading-none text-heading">Modal title</h5>
            <button type="button" class="btn-close absolute -right-1 -top-1 hover:bg-light-100 dark:hover:bg-dark-200" data-tb-modal-dismiss></button>
        </div>

        <div class="mb-5">
            Ut in nostrud magna consectetur id ea quis aute eu. Minim anim qui magna proident veniam excepteur reprehenderit ipsum magna veniam eu.
            Velit commodo cillum pariatur voluptate pariatur magna in aliqua et do.
        </div>

        <div class="text-md text-white">
            <button type="button" class="btn bg-blue-600/90 hover:bg-blue-600" data-tb-modal-dismiss>Close Modal</button>
        </div>
    </div>
</div>

Use max-width utility classes to resize the modal.

<!-- Modal small -->
<button type="button" class="btn mr-1 mt-1 bg-blue-600/90 text-md text-white hover:bg-blue-600" data-tb-modal="#modal-small">
    Small modal
</button>

<div data-tb-modal-window id="modal-small" tabindex="-1" aria-hidden="true">
    <div data-tb-modal-dialog class="max-w-sm p-5">
        ...
    </div>
</div>

<!-- Modal large -->
<button type="button" class="btn mr-1 mt-1 bg-blue-600/90 text-md text-white hover:bg-blue-600" data-tb-modal="#modal-large">
    Larga modal
</button>

<div data-tb-modal-window id="modal-large" tabindex="-1" aria-hidden="true">
    <div data-tb-modal-dialog class="max-w-3xl p-5">
        ...
    </div>
</div>

<!-- Modal xl -->
<button type="button" class="btn mr-1 mt-1 bg-blue-600/90 text-md text-white hover:bg-blue-600" data-tb-modal="#modal-xl">
    Extra Large modal
</button>

<div data-tb-modal-window id="modal-xl" tabindex="-1" aria-hidden="true">
    <div data-tb-modal-dialog class="max-w-6xl p-5">
        ...
    </div>
</div>

Disabled keyboard

To prevent the closure of the modal when the escape key is pressed, you can utilize the data-tb-modal-keyboard=“false” attribute to disable the keyboard event.

<div data-tb-modal-window id="modal-keyboard" data-tb-modal-keyboard="false" tabindex="-1" aria-hidden="true">
    <div data-tb-modal-dialog class="max-w-6xl p-5">
        ...
    </div>
</div>

Scrolling long content

When modals exceed the user’s viewport or device size, they scroll independently without affecting the page itself.

As you can see, we’re using scrollbar flex-1 overflow-auto classes to make the content scrolling possible.

<div data-tb-modal-window id="modal-scroll" tabindex="-1" aria-hidden="true">
    <div data-tb-modal-dialog class="flex h-full flex-col">
        <div class="relative flex-shrink-0 p-5">
            <h5 class="text-lg font-bold leading-none text-heading">Modal title</h5>
            <button type="button" class="btn-close absolute right-4 top-4 hover:bg-light-100" data-tb-modal-dismiss></button>
        </div>

        <div class="scrollbar flex-1 overflow-auto px-5">
            <!-- Extra long content... -->
        </div>

        <div class="flex-shrink-0 p-5 text-md text-white">
            <button type="button" class="btn bg-blue-600/90 hover:bg-blue-600" data-tb-modal-dismiss>Close Modal</button>
        </div>
    </div>
</div>