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"
    data-kt-modal-backdrop-static="true"
  >
    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>

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"
    data-kt-modal-backdrop="false"
    data-kt-modal-persistent="true"
  >
    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>

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="flex w-full border border-gray-200 dark:border-neutral-700 shadow-xs shadow-black/5 transition-[color,box-shadow] text-gray-600 placeholder:text-gray-500 dark:text-neutral-300 dark:placeholder:text-neutral-400 focus-visible:ring-gray-200 dark:focus-visible:ring-neutral-700 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;[readonly]]:opacity-70 file:h-full [&amp;[type=file]]:py-0 file:border-solid file:border-gray-200 dark:file:border-neutral-700 file:bg-transparent file:font-medium file:not-italic file:text-gray-700 dark:file:text-neutral-200 file:p-0 file:border-0 file:border-e aria-invalid:border-red-200 aria-invalid:ring-red-200 h-10 px-3 py-2 text-sm rounded-lg file:pe-3 file:me-3"
          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`	~~string~~	~~"auto"~~	Specifies the z-index of the modal.
`data-kt-modal-backdrop`	~~boolean~~	~~true~~	Controls whether a backdrop is displayed behind the modal.
`data-kt-modal-backdrop-class`	~~string~~	~~"transition-all duration-300 fixed inset-0 bg-gray-900 opacity-25"~~	Defines the CSS classes applied to the modal backdrop.
`data-kt-modal-backdrop-static`	~~boolean~~	~~false~~	Specifies whether the modal backdrop is static, preventing modal closure on click.
`data-kt-modal-keyboard`	~~boolean~~	~~false~~	Controls whether the modal can be closed by pressing the Escape key.
`data-kt-modal-disable-scroll`	~~boolean~~	~~true~~	Specifies whether scrolling on the page is disabled when the modal is open.
`data-kt-modal-persistent`	~~boolean~~	~~false~~	Controls whether the modal remains open after clicking outside of it.
`data-kt-modal-focus`	~~boolean~~	~~true~~	Specifies whether an input defined with the `data-kt-modal-input-focus="true"` attribute gains focus when the modal opened.
`data-kt-modal-hidden-class`	~~string~~	~~"hidden"~~	Defines the CSS class applied to hide the modal.

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.
`data-kt-modal-input-focus="true"`	Specifies an input that gains focus when the modal opened.
Classes
`open`	Applied to a specific modal to indicate that it should be displayed or opened. Typically triggers the modal to become visible.
`hidden`	Sets a specific modal to be hidden initially. Can be used to hide the modal until it needs to be displayed.

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.
`toggle()`	Toggles a modal state to shown or hidden.
`getOption(name)`	Retrieves the value of a configuration option by `name` parameter from a KTModal instance.
`getElement()`	Retrieves the DOM element linked to a specific KTModal instance.
`getTargetElement()`	Returns the DOM element that triggered the display of the KTModal instance.
`on(eventName, handler)`	Allows attaching event listeners to the KTModal custom events using the `eventName` and `eventId` string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTModal. The function returns `string` as a unique identifier for the registered listener, allowing you to remove it later if needed.
`off(eventName, eventId)`	Removes an event listener for the `eventName` and `eventId` parameters attached with the `on` method.
`dispose()`	Removes the KTModal instance from an element, including any associated data stored on the DOM element.

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

To initialize Tailwind Modal with JavaScript, use data-modal="false" attribute instead. This prevents automatic initialization on page load.

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 `KTModal` object associated with the given DOM element `element` .
`getOrCreateInstance(element)`	Returns the existing `KTModal` object for the provided DOM element `element` , or creates a new instance if none exists, then returns the same.

// 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.
`hidden`	Triggered immediately after a modal element is hidden.
`toggle`	Triggered immediately before a modal element is toggled(shown/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