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.
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.
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 modalsKTModal.init()// Initialzie pending modalsKTModal.createInstances();// Get modal objectconst 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).
