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 >
This example showcases a modal with a footer that can contain action buttons.
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 >
Apply the kt-scrollable-y class to the modal body element to enable vertical scrolling within the modal body.
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 >
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.
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-modalbooleantrueUsed 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 showTriggered immediately before a modal element is shown. shownTriggered immediately after a modal element is shown. hideTriggered 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' );
});