Slide Over

Blank Slide Over

Show example code

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#basic-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="basic-slide-over-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagBlank Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome blank slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

Slide Over Size

Show example code

Show Small Slide Over Show Medium Slide Over Show Large Slide Over Show Superlarge Slide Over

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Small Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#small-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Small Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#medium-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Medium Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Medium Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#large-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Large Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Large Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#superlarge-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Superlarge Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Super Large Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Small Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="small-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-sm"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagSmall Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome small slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="medium-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagMedium Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome medium slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Medium Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="large-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-lg"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagLarge Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome large slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Large Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="superlarge-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-xl"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagSuperlarge Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome superlarge slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Super Large Slide Over Content --HTMLCloseTag

Slide Over With Close Button

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#button-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="button-slide-over-preview" class="modal modal-slide-over" data-tw-backdrop="static" 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-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagSlide Over With Close ButtonHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome slide over with close button! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

Overlapping Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#overlapping-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="overlapping-slide-over-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagOverlapping Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-5"HTMLCloseTagClick button bellow to show overlapping slide over!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#next-overlapping-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Overlapping Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Overlapping Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="next-overlapping-slide-over-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagOverlapping Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body text-center"HTMLCloseTag This is totally awesome overlapping slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Overlapping Slide Over Content --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

Header & Footer Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-tw-toggle="modal" data-tw-target="#header-footer-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="header-footer-slide-over-preview" class="modal modal-slide-over" data-tw-backdrop="static" 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 HTMLOpenTag!-- BEGIN: Slide Over Header --HTMLCloseTag HTMLOpenTagdiv class="modal-header"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagBroadcast MessageHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-secondary hidden sm:flex"HTMLCloseTag HTMLOpenTagi data-lucide="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown sm:hidden"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTag HTMLOpenTagi data-lucide="more-vertical" class="w-5 h-5 text-slate-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="javascript:;" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Header --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Body --HTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="modal-form-1" class="form-label"HTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-1" type="text" class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-2" class="form-label"HTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-2" type="text" class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-3" class="form-label"HTMLCloseTagSubjectHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-3" type="text" class="form-control" placeholder="Important Meeting"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-4" class="form-label"HTMLCloseTagHas the WordsHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-4" type="text" class="form-control" placeholder="Job, Work, Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-5" class="form-label"HTMLCloseTagDoesn't HaveHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-5" type="text" class="form-control" placeholder="Job, Work, Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-6" class="form-label"HTMLCloseTagSizeHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagselect id="modal-form-6" class="form-select"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Body --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Footer --HTMLCloseTag HTMLOpenTagdiv class="modal-footer w-full absolute bottom-0"HTMLCloseTag HTMLOpenTagbutton type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-primary w-20"HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Footer --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

Programmatically Show/Hide Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Show Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga id="programmatically-show-slide-over" href="javascript:;" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="programmatically-slide-over" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagProgrammatically Show/Hide Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Hide Slide Over Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-hide-slide-over" href="javascript:;" class="btn btn-primary mr-1"HTMLCloseTagHide Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Hide Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Toggle Slide Over Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-toggle-slide-over" href="javascript:;" class="btn btn-primary mr-1 mt-2 sm:mt-0"HTMLCloseTagToggle Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Toggle Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

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

Methods

Get or Create Instance

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

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

Get Instance

Static method which allows you to get the slide over instance associated with a DOM element.

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

Hide

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

  mySlideOver.hide();

Show

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

  mySlideOver.show();

Toggle

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

  mySlideOver.toggle();

Events

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

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 slide over 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 slide over has finished being hidden from the user (will wait for CSS transitions to complete).

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