Tailwind Modal

Docs

Tailwind Modal

Tailwind Modal allows to add interactive elements, like forms or logins, to a dialog that appears on top of your page content, focusing user attention.

Examples

Basic Usage

Click the below toggle button to reveal the default modal example.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal">
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Footer

This example showcases a modal with a footer that can contain action buttons.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal">
    <div class="kt-modal-content max-w-[400px] top-[5%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
      <div class="kt-modal-footer">
        <div></div>
        <div class="flex gap-4">
          <button
            class="kt-btn kt-btn-secondary"
            data-kt-modal-dismiss="#modal"
          >
            Cancel</button
          ><button class="kt-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Center

Vertically and horizontally center the modal.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal kt-modal-center" data-kt-modal="true" id="modal">
    <div class="kt-modal-content max-w-[400px]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Scrollable

Apply the kt-scrollable-y class to the modal body element to enable vertical scrolling within the modal body.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal">
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body max-h-[200px] pe-2">
        <div class="rounded-lg bg-muted w-full grow h-[600px]"></div>
      </div>
      <div class="kt-modal-footer gap-2.5 justify-end">
        <button class="kt-btn kt-btn-secondary" data-kt-modal-dismiss="#modal">
          Cancel</button
        ><button class="kt-btn">Submit</button>
      </div>
    </div>
  </div>
</div>

Long Content

Apply the kt-scrollable-y class to the modal body element to enable vertical scrolling within the modal body.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal kt-modal-center" data-kt-modal="true" id="modal">
    <div class="kt-modal-content max-w-[400px] max-h-[95%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[600px]"></div>
      </div>
      <div class="kt-modal-footer">
        <div class="flex gap-4">
          <button
            class="kt-btn kt-btn-secondary"
            data-kt-modal-dismiss="#modal"
          >
            Cancel</button
          ><button class="kt-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Static Backdrop

Use the attribute data-kt-modal-backdrop-static="true" to display a modal with a static backdropn that prevents modal closure on click on it.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div
    class="kt-modal"
    data-kt-modal="true"
    data-kt-modal-backdrop-static="true"
    id="modal"
  >
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

No Backdrop

Use the attribute data-kt-modal-backdrop="false" to display a modal without the backdrop layer.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div
    class="kt-modal kt-modal-center"
    data-kt-modal="true"
    data-kt-modal-backdrop="false"
    id="modal"
  >
    <div class="kt-modal-content border border-border max-w-[400px]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Persistent

Use the data-kt-modal-persistent="true" attribute to prevent modal closure when clicking outside of it.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div
    class="kt-modal kt-modal-fit kt-modal-center max-w-[400px]"
    data-kt-modal="true"
    data-kt-modal-backdrop="false"
    data-kt-modal-persistent="true"
    id="modal"
  >
    <div class="kt-modal-content">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Toggle Modals

Switch between multiple modals for different actions.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal_one">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal_one">
    <div class="kt-modal-content max-w-[300px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal_one"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
      <div class="kt-modal-footer">
        <button type="button" class="kt-btn" data-kt-modal-toggle="#modal_two">
          Launch Another Modal
        </button>
      </div>
    </div>
  </div>
  <div class="kt-modal" data-kt-modal="true" id="modal_two">
    <div class="kt-modal-content max-w-[400px] top-[5%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal_two"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
      <div class="kt-modal-footer">
        <button type="button" class="kt-btn" data-kt-modal-toggle="#modal_one">
          Launch Previous Modal
        </button>
      </div>
    </div>
  </div>
</div>

Input Auto-focus

To automatically set focus on an input element within a modal when it appears, apply the data-kt-modal-autofocus="true" attribute to that input.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal">
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <input
          type="text"
          data-kt-modal-input-focus="true"
          class="kt-input"
          placeholder="Modal input..."
        />
        <div class="rounded-lg bg-muted w-full grow mt-5 h-[175px]"></div>
      </div>
    </div>
  </div>
</div>

Page Scroll

Apply the data-kt-modal-disable-scroll="false" attribute to allow the page scrollbar to remain enabled.

<div class="h-[1000px">
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div
    class="kt-modal"
    data-kt-modal="true"
    data-kt-modal-disable-scroll="false"
    id="modal"
  >
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
</div>

Full Width

The example below demonstrates the implementation of a full-width modal.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal kt-modal-center" data-kt-modal="true" id="modal">
    <div class="kt-modal-content">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Overlay

The example below illustrates an overlay modal that spans the entire screen size.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal">
    <div class="kt-modal-content h-full">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body pe-2">
        <div class="rounded-lg bg-muted w-full grow h-[800px]"></div>
      </div>
      <div class="kt-modal-footer justify-end">
        <div class="flex gap-4">
          <button
            class="kt-btn kt-btn-secondary"
            data-kt-modal-dismiss="#modal"
          >
            Cancel</button
          ><button class="kt-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Sizes

Explore various modal width sizes set using Tailwind width classes.

<div class="flex gap-4">
  <button class="kt-btn" data-kt-modal-toggle="#modal_one">Small</button
  ><button class="kt-btn" data-kt-modal-toggle="#modal_two">Medium</button
  ><button class="kt-btn" data-kt-modal-toggle="#modal_three">Large</button>
  <div class="kt-modal" data-kt-modal="true" id="modal_one">
    <div class="kt-modal-content max-w-[300px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal_one"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
  <div class="kt-modal" data-kt-modal="true" id="modal_two">
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal_two"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
  <div class="kt-modal" data-kt-modal="true" id="modal_three">
    <div class="kt-modal-content max-w-[500px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          type="button"
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal_three"
        >
          <svg
            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"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the modal component during auto initialization.

Option	Type	Default	Description
`data-kt-modal`	~~boolean~~	~~true~~	Used to auto-initialize KTModal instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
`data-kt-modal-zindex`

Selectors

This table details the custom classes and data attributes used by the modal component.

Name	Description
Data Attributes
`data-kt-modal="true"`	A selector used to auto-initialize the modal object on page load.
`data-kt-modal-dismiss="true"`	Identifies an element that, upon click, hides the modal.

Tailwind Modifiers

Custom modifiers to control the accordion’s style and behavior with Tailwind classes.

Name	Description
`kt-modal-open:*`	Applies specific styles to Tailwind Modal and its children when its is shown.

Methods

Use KTModal component's API methods to programmatically control its behavior.

Method	Description
`new KTModal(element, options)`	Creates an object instance of KTModal class for the given DOM element and configuration options .
`show()`	Shows a modal element.
`hide()`	Hides a modal element.

const modalEl = document.querySelector('#my-modal');
const modal = KTModal.getInstance(modalEl);
 
modal.show();
modal.hide();
modal.toggle();

Utilities

Manage and interact with KTModal instances using these static methods of KTModal JavaScript class.

Method	Description
`init()`	Automatically initializes KTModal object for all elements with the `data-kt-modal="true"` attribute on page load.
`createInstances()`	Allows to create KTModal instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the object associated with the given DOM element .

// Initialize all modals
KTModal.init()
 
// Initialzie pending modals
KTModal.createInstances();
 
// Get modal object
const modalEl = document.querySelector('#my-modal');
const modal = KTModal.getInstance(modalEl);

Events

KTModal custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`show`	Triggered immediately before a modal element is shown.
`shown`	Triggered immediately after a modal element is shown.
`hide`	Triggered immediately before a modal element is hidden.

const modalEl = document.querySelector('#my-modal');
const modal = KTModal.getInstance(modalEl);
 
modal.on('show', () => {
	console.log('show event');
});
 
modal.on('shown', () => {
	console.log('shown event');
});
 
modal.on('hide', (detail) => {
	detail.cancel = true;
	console.log('hide action canceled');
});

PreviouseLink NextPagination