Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Robert De Niro
robertdeniro@left4code.com
Johnny Depp
johnnydepp@left4code.com
Sylvester Stallone
sylvesterstallone@left4code.com
Kevin Spacey
kevinspacey@left4code.com
Products
Oppo Find X2 Pro
Smartphone & Tablet
Nike Air Max 270
Sport & Outdoor
Nike Tanjun
Sport & Outdoor
Samsung Galaxy S20 Ultra
Smartphone & Tablet

## Modal

## Blank Modal

Show example code
Show Modal
This is totally awesome blank modal!

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#basic-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="basic-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag This is totally awesome blank modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Modal Size

Show example code
Show Small Modal Show Medium Modal Show Large Modal Show Superlarge Modal
This is totally awesome small modal!
This is totally awesome medium modal!
This is totally awesome large modal!
This is totally awesome superlarge modal!

      HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Small Modal Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#small-modal-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Small ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Small Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Modal Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#medium-modal-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Medium ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Medium Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Modal Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#large-modal-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Large ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Large Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Modal Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#superlarge-modal-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Superlarge ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Super Large Modal Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Small Modal Content --HTMLCloseTag HTMLOpenTagdiv id="small-modal-size-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-sm"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag This is totally awesome small modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Small Modal Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Modal Content --HTMLCloseTag HTMLOpenTagdiv id="medium-modal-size-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag This is totally awesome medium modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Medium Modal Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Modal Content --HTMLCloseTag HTMLOpenTagdiv id="large-modal-size-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-lg"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag This is totally awesome large modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Large Modal Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Modal Content --HTMLCloseTag HTMLOpenTagdiv id="superlarge-modal-size-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-xl"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag This is totally awesome superlarge modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Super Large Modal Content --HTMLCloseTag

## Warning Modal

Show example code
Show Modal
Oops...
Something went wrong!
Why do I have this issue?

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#warning-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="warning-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-lucide="x-circle" class="w-16 h-16 text-warning mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagOops...HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-2"HTMLCloseTagSomething went wrong!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn w-24 btn-primary"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag HTMLOpenTaga href="" class="text-primary"HTMLCloseTagWhy do I have this issue?HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Modal With Close Button

Show example code
Show Modal
Modal Example
Modal with close button

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#button-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="button-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTaga data-tw-dismiss="modal" href="javascript:;"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-8 h-8 text-slate-400"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-lucide="check-circle" class="w-16 h-16 text-success mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagModal ExampleHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-2"HTMLCloseTagModal with close buttonHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn btn-primary w-24"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Static Backdrop Modal

Show example code
Show Modal
I will not close if you click outside me. Don't even try to press escape key.

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#static-backdrop-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="static-backdrop-modal-preview" class="modal" data-tw-backdrop="static" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-5"HTMLCloseTagI will not close if you click outside me. Don't even try to press escape key.HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn btn-primary w-24"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Overlapping Modal

Show example code
Show Modal
Click button bellow to show overlapping modal!
Show Overlapping Modal
This is totally awesome overlapping modal!

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#overlapping-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="overlapping-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-5"HTMLCloseTagClick button bellow to show overlapping modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Modal Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#next-overlapping-modal-preview" class="btn btn-primary"HTMLCloseTagShow Overlapping ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Overlapping Modal Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Modal Content --HTMLCloseTag HTMLOpenTagdiv id="next-overlapping-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body text-center"HTMLCloseTag This is totally awesome overlapping modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Overlapping Modal Content --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Header & Footer Modal

Show example code

## Delete Modal

Show example code
Show Modal
Are you sure?
Do you really want to delete these records?
This process cannot be undone.

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#delete-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="delete-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-lucide="x-circle" class="w-16 h-16 text-danger mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagAre you sure?HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-2"HTMLCloseTagDo you really want to delete these records? HTMLOpenTagbrHTMLCloseTagThis process cannot be undone.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-24 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-danger w-24"HTMLCloseTagDeleteHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Success Modal

Show example code
Show Modal
Good job!
You clicked the button!

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#success-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="success-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-lucide="check-circle" class="w-16 h-16 text-success mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagGood job!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-2"HTMLCloseTagYou clicked the button!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn btn-primary w-24"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Tiny Slider Modal

Show example code
Show Modal

      HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#tiny-slider-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="tiny-slider-modal-preview" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag HTMLOpenTagdiv class="mx-6"HTMLCloseTag HTMLOpenTagdiv class="center-mode"HTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-1.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-14.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-10.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone - HTML Admin Template" src="dist/images/preview-14.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

## Programmatically Show/Hide Modal

Show example code
Show Modal
Hide Modal Toggle Modal

      HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga id="programmatically-show-modal" href="javascript:;" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="programmatically-modal" class="modal" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Hide Modal Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-hide-modal" href="javascript:;" class="btn btn-primary mr-1"HTMLCloseTagHide ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Hide Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-toggle-modal" href="javascript:;" class="btn btn-primary mr-1"HTMLCloseTagToggle ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

      // Show modal const el = document.querySelector("#programmatically-modal"); const modal = tailwind.Modal.getOrCreateInstance(el); modal.show(); // Hide modal const el = document.querySelector("#programmatically-modal"); const modal = tailwind.Modal.getOrCreateInstance(el); modal.hide(); // Toggle modal const el = document.querySelector("#programmatically-modal"); const modal = tailwind.Modal.getOrCreateInstance(el); modal.toggle();

## Methods

Get or Create Instance
Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized.

      const myModal = tailwind.Modal.getOrCreateInstance(document.querySelector("#myModal"));

Get Instance
Static method which allows you to get the modal instance associated with a DOM element.

      const myModal = tailwind.Modal.getInstance(document.querySelector("#myModal"));

Hide
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.tw.modal event occurs).

      myModal.hide();

Show
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.tw.modal event occurs).

      myModal.show();

Toggle
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.tw.modal or hidden.tw.modal event occurs).

      myModal.toggle();

## Events

Midone’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event type | Description
--- | ---
show.tw.modal | This event fires immediately when the show instance method is called.
shown.tw.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete)
hide.tw.modal | This event is fired immediately when the hide instance method has been called.
hidden.tw.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

      const myModalEl = document.getElementById('myModal') myModalEl.addEventListener('hidden.tw.modal', function (event) { // do something... })

Dark Mode