Rubick
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Kate Winslet
katewinslet@left4code.com
Christian Bale
christianbale@left4code.com
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Tom Cruise
tomcruise@left4code.com
Products
Sony A7 III
Photography
Sony Master Series A9G
Electronic
Dell XPS 13
PC & Laptop
Nike Tanjun
Sport & Outdoor

## Slide Over

## Blank Slide Over

Show example code
Show Slide Over

## Blank Slide Over

This is totally awesome blank slide over!

      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

## Small Slide Over

This is totally awesome small slide over!

## Medium Slide Over

This is totally awesome medium slide over!

## Large Slide Over

This is totally awesome large slide over!

## Superlarge Slide Over

This is totally awesome 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

## Slide Over With Close Button

This is totally awesome slide over with close button!

      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

## Overlapping Slide Over

Click button bellow to show overlapping slide over!
Show Overlapping Slide Over

## Overlapping Slide Over

This is totally awesome overlapping 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

## Programmatically Show/Hide Slide Over

Show example code
Show Slide Over

## Programmatically Show/Hide Slide Over

Hide Slide Over Toggle 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... })

Dark Mode