Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Base Components

Tailwind CSS Modal

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

Default Modal

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

Footer

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

Table

This example demonstrates a modal containing a table.
Preview HTML

Center

Utilize the modal-center class to both, vertically and horizontally center the modal.
Preview HTML

Scrollable

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

Long Content

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

Static Backdrop

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

No Backdrop

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

Toggle Modals

Switch between multiple modals for different actions.
Preview HTML

Persistent

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

Input Autofocus

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

Page Scroll

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

Full Width

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

Overlay

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

Draggable

Description goes here.
Preview HTML

Sizes

Explore various modal width sizes set using Tailwind CSS width classes.
Preview HTML

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Modal component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/modal/modal.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Modal component.
src/core/plugins/components/modal.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Modal component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Modal component. 
				
					<button class="btn btn-primary" data-modal-toggle="#my_modal">
 Show Modal
</button>
<div class="modal max-w-[600px] top-[10%]" data-modal="true" id="my_modal">
 <div class="modal-content">
  <div class="modal-header">
   <h3 class="modal-title">
    Modal Title
   </h3>
   <button class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true">
    <i class="ki-outline ki-cross">
    </i>
   </button>
  </div>
  <div class="modal-body">
   Modal body goes here.
  </div>
 </div>
</div>

Attributes

The following HTML attributes are utilized by Tailwind CSS Modal component to control its JavaScript behavior.
HTML Attribute Description
data-modal-dismiss="true" Identifies an element that, upon click, hides the modal.
data-modal-input-focus="true" Specifies an input that gains focus when the modal opened.

Classes

This table outlines the custom CSS classes utilized for styling the default components of the Tailwind CSS Modal.
Class Description
modal Base class for the modal component. It wraps the entire modal content and provides basic styling and behavior.
modal-content Represents the main content area of the modal. It contains the header, body, and footer sections of the modal content.
modal-header Styles the header section of the modal. Typically contains the title and any close button or other controls.
modal-title Applied to the title element within the modal header. Used to style and position the title text.
modal-body Represents the body section of the modal content. Contains the main content or form elements displayed within the modal.
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.

Data Attribute Initialization

Auto-initialize all KTModal instances on page load by adding the data-modal="true" attribute to your modal elements. This triggers on the fly initialization by the KTModal JavaScript component. 
				
					<button class="btn btn-primary" data-modal-toggle="#my_modal">
 Show Modal
</button>
<div class="modal max-w-[600px] top-[10%]" data-modal="true" id="my_modal">
 <div class="modal-content">
  <div class="modal-header">
   <h3 class="modal-title">
    Modal Title
   </h3>
   <button class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true">
    <i class="ki-outline ki-cross">
    </i>
   </button>
  </div>
  <div class="modal-body">
   Modal body goes here.
  </div>
 </div>
</div>
These attributes allow you to set options for the KTModal component during initialization. The values you provide as strings are automatically converted to the appropriate KTModal Options .
HTML Attribute Type Default Description
data-modal boolean true Used to auto-initialize KTModal instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
data-modal-zindex string "auto" Specifies the z-index of the modal.
data-modal-backdrop boolean true Controls whether a backdrop is displayed behind the modal.
data-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-modal-backdrop-static boolean false Specifies whether the modal backdrop is static, preventing modal closure on click.
data-modal-keyboard boolean false Controls whether the modal can be closed by pressing the Escape key.
data-modal-disable-scroll boolean true Specifies whether scrolling on the page is disabled when the modal is open.
data-modal-persistent boolean false Controls whether the modal remains open after clicking outside of it.
data-modal-focus boolean true Specifies whether an input defined with the data-modal-input-focus="true" attribute gains focus when the modal opened.
data-modal-hidden-class string "hidden" Defines the CSS class applied to hide the modal.

JavaScript Initialization

To initialize a new modal component, pass the corresponding DOM element and configuration options to the KTModal class constructor.
JavaScript HTML 
				
					// Modal toggle element
const modalEl = document.querySelector('#my_modal');

// Configuration options(optional)
const options = {
	backdropClass: 'transition-all duration-300 fixed inset-0 bg-gray-900 opacity-25',
	backdrop: true,
	disableScroll: true,
	persistent: true
};

// Initialize object
const modal = new KTModal(modalEl, options);

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

Options

This table outlines the configuration options for initialization of Tailwind CSS Modal instances, using the KTModal JavaScript component.
Option Type Default Description
zindex string "auto" Specifies the z-index of the modal.
backdrop boolean true Controls whether a backdrop is displayed behind the modal.
backdropClass string "transition-all duration-300 fixed inset-0 bg-gray-900 opacity-25" Defines the CSS classes applied to the modal backdrop.
backdropStatic boolean false Specifies whether the modal backdrop is static, preventing modal closure on click.
keyboard boolean false Controls whether the modal can be closed by pressing the Escape key.
disableScroll boolean true Specifies whether scrolling on the page is disabled when the modal is open.
persistent boolean false Controls whether the modal remains open after clicking outside of it.
focus boolean true Specifies whether an input defined with the input-focus="true" attribute gains focus when the modal opened.
hiddenClass string "hidden" Defines the CSS class applied to hide the modal.

Utilities

Manage and interact with KTModal instances using these static methods of KTModal class.
Method Description
init() Automatically initializes KTModal object for all elements with the data-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.
JavaScript HTML 
				
					// Initialize all modals
KTModal.init()

// Initialzie pending modals
KTModal.createInstances();

// Get modal object
const modalEl = document.querySelector('#my_modal');
const modal = KTModal.getInstance(modalEl);

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.
JavaScript HTML 
				
					const modalEl = document.querySelector('#my_modal');
const modal = KTModal.getInstance(modalEl);

modal.show();
modal.hide();
modal.toggle();

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');
});
Previous Dropdown Next Progress