Blank Modal
Warning Modal
Modal With Close Button
Static Backdrop Modal
Overlapping Modal
Header & Footer Modal
Delete Modal
Success Modal
Tiny Slider Modal
 }})
 }})
 }})
 }})
 . ')
 . ')
 . ')
 . ')
Programmatically Show/Hide Modal
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...
})