Modal

Blank Modal

Show example code

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#basic-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="basic-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body p-10 text-center"> This is totally awesome blank modal! </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Modal Size

Show example code

Show Small Modal Show Medium Modal Show Large Modal Show Superlarge Modal

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

Warning Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#warning-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="warning-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body p-0">
                 <div class="p-5 text-center"> <i data-lucide="x-circle" class="w-16 h-16 text-warning mx-auto mt-3"></i>
                     <div class="text-3xl mt-5">Oops...</div>
                     <div class="text-slate-500 mt-2">Something went wrong!</div>
                 </div>
                 <div class="px-5 pb-8 text-center"> <button type="button" data-tw-dismiss="modal" class="btn w-24 btn-primary">Ok</button> </div>
                 <div class="p-5 text-center border-t border-slate-200/60 dark:border-darkmode-400"> <a href="" class="text-primary">Why do I have this issue?</a> </div>
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Modal With Close Button

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#button-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="button-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content"> <a data-tw-dismiss="modal" href="javascript:;"> <i data-lucide="x" class="w-8 h-8 text-slate-400"></i> </a>
             <div class="modal-body p-0">
                 <div class="p-5 text-center"> <i data-lucide="check-circle" class="w-16 h-16 text-success mx-auto mt-3"></i>
                     <div class="text-3xl mt-5">Modal Example</div>
                     <div class="text-slate-500 mt-2">Modal with close button</div>
                 </div>
                 <div class="px-5 pb-8 text-center"> <button type="button" data-tw-dismiss="modal" class="btn btn-primary w-24">Ok</button> </div>
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Static Backdrop Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#static-backdrop-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="static-backdrop-modal-preview" class="modal" data-tw-backdrop="static" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body px-5 py-10">
                 <div class="text-center">
                     <div class="mb-5">I will not close if you click outside me. Don't even try to press escape key.</div> <button type="button" data-tw-dismiss="modal" class="btn btn-primary w-24">Ok</button>
                 </div>
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Overlapping Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#overlapping-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="overlapping-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body px-5 py-10">
                 <div class="text-center">
                     <div class="mb-5">Click button bellow to show overlapping modal!</div> <!-- BEGIN: Overlapping Modal Toggle --> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#next-overlapping-modal-preview" class="btn btn-primary">Show Overlapping Modal</a> <!-- END: Overlapping Modal Toggle -->
                 </div> <!-- BEGIN: Overlapping Modal Content -->
                 <div id="next-overlapping-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <div class="modal-body text-center"> This is totally awesome overlapping modal! </div>
                         </div>
                     </div>
                 </div> <!-- END: Overlapping Modal Content -->
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Header & Footer Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#header-footer-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="header-footer-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <!-- BEGIN: Modal Header -->
             <div class="modal-header">
                 <h2 class="font-medium text-base mr-auto">Broadcast Message</h2> <button class="btn btn-outline-secondary hidden sm:flex"> <i data-lucide="file" class="w-4 h-4 mr-2"></i> Download Docs </button>
                 <div class="dropdown sm:hidden"> <a class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false" data-tw-toggle="dropdown"> <i data-lucide="more-horizontal" class="w-5 h-5 text-slate-500"></i> </a>
                     <div class="dropdown-menu w-40">
                         <ul class="dropdown-content">
                             <li> <a href="javascript:;" class="dropdown-item"> <i data-lucide="file" class="w-4 h-4 mr-2"></i> Download Docs </a> </li>
                         </ul>
                     </div>
                 </div>
             </div> <!-- END: Modal Header -->
             <!-- BEGIN: Modal Body -->
             <div class="modal-body grid grid-cols-12 gap-4 gap-y-3">
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-form-1" class="form-label">From</label> <input id="modal-form-1" type="text" class="form-control" placeholder="example@gmail.com"> </div>
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-form-2" class="form-label">To</label> <input id="modal-form-2" type="text" class="form-control" placeholder="example@gmail.com"> </div>
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-form-3" class="form-label">Subject</label> <input id="modal-form-3" type="text" class="form-control" placeholder="Important Meeting"> </div>
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-form-4" class="form-label">Has the Words</label> <input id="modal-form-4" type="text" class="form-control" placeholder="Job, Work, Documentation"> </div>
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-form-5" class="form-label">Doesn't Have</label> <input id="modal-form-5" type="text" class="form-control" placeholder="Job, Work, Documentation"> </div>
                 <div class="col-span-12 sm:col-span-6"> <label for="modal-form-6" class="form-label">Size</label> <select id="modal-form-6" class="form-select">
                         <option>10</option>
                         <option>25</option>
                         <option>35</option>
                         <option>50</option>
                     </select> </div>
             </div> <!-- END: Modal Body -->
             <!-- BEGIN: Modal Footer -->
             <div class="modal-footer"> <button type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1">Cancel</button> <button type="button" class="btn btn-primary w-20">Send</button> </div> <!-- END: Modal Footer -->
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Delete Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#delete-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="delete-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body p-0">
                 <div class="p-5 text-center"> <i data-lucide="x-circle" class="w-16 h-16 text-danger mx-auto mt-3"></i>
                     <div class="text-3xl mt-5">Are you sure?</div>
                     <div class="text-slate-500 mt-2">Do you really want to delete these records? <br>This process cannot be undone.</div>
                 </div>
                 <div class="px-5 pb-8 text-center"> <button type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-24 mr-1">Cancel</button> <button type="button" class="btn btn-danger w-24">Delete</button> </div>
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Success Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#success-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="success-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body p-0">
                 <div class="p-5 text-center"> <i data-lucide="check-circle" class="w-16 h-16 text-success mx-auto mt-3"></i>
                     <div class="text-3xl mt-5">Good job!</div>
                     <div class="text-slate-500 mt-2">You clicked the button!</div>
                 </div>
                 <div class="px-5 pb-8 text-center"> <button type="button" data-tw-dismiss="modal" class="btn btn-primary w-24">Ok</button> </div>
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Tiny Slider Modal

Show example code

Show Modal

                                              <!-- BEGIN: Modal Toggle -->
 <div class="text-center"> <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#tiny-slider-modal-preview" class="btn btn-primary">Show Modal</a> </div> <!-- END: Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="tiny-slider-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body">
                 <div class="mx-6">
                     <div class="center-mode">
                         <div class="h-56 px-2">
                             <div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Rocketman - HTML Admin Template" src="dist/images/preview-1.jpg" /> </div>
                         </div>
                         <div class="h-56 px-2">
                             <div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Rocketman - HTML Admin Template" src="dist/images/preview-8.jpg" /> </div>
                         </div>
                         <div class="h-56 px-2">
                             <div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Rocketman - HTML Admin Template" src="dist/images/preview-1.jpg" /> </div>
                         </div>
                         <div class="h-56 px-2">
                             <div class="h-full image-fit rounded-md overflow-hidden"> <img alt="Rocketman - HTML Admin Template" src="dist/images/preview-10.jpg" /> </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

Programmatically Show/Hide Modal

Show example code

                                              <!-- BEGIN: Show Modal Toggle -->
 <div class="text-center"> <a id="programmatically-show-modal" href="javascript:;" class="btn btn-primary mr-1 mb-2">Show Modal</a> </div> <!-- END: Show Modal Toggle -->
 <!-- BEGIN: Modal Content -->
 <div id="programmatically-modal" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body p-10 text-center">
                 <!-- BEGIN: Hide Modal Toggle --> <a id="programmatically-hide-modal" href="javascript:;" class="btn btn-primary mr-1">Hide Modal</a> <!-- END: Hide Modal Toggle -->
                 <!-- BEGIN: Toggle Modal Toggle --> <a id="programmatically-toggle-modal" href="javascript:;" class="btn btn-primary mr-1">Toggle Modal</a> <!-- END: Toggle Modal Toggle -->
             </div>
         </div>
     </div>
 </div> <!-- END: Modal Content --> 
                                        

                                              // 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

Rocketman’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