Modals
Bootstrap modals and side panels for content and forms, SweetAlert2 dialogs for short messages and confirmations.
Bootstrap Modal
data-bs-toggle="modal"BasicHeader, content and a footer with Cancel and Save.
With tabsLarge modal with horizontal tabs and form fields.
Form with validationRequired fields are checked before the modal closes.
ScrollableLong content scrolls inside; header and footer stay put.
Static backdropDoes not close on an outside click or Esc.
ResultBig centered icon for a finished action.
Media previewImage edge to edge with file details and actions.
Side panelBootstrap offcanvas for quick edits next to a list.
Sizes
.modal-sm | .modal-lg | .modal-xl | .modal-fullscreen
Position & animation
.modal-dialog-centered | .modal-dialog-bottom | .modal.zoom
SweetAlert2
Odin.DialogWarningA message the user has to acknowledge.
ConfirmDelete with Cancel focused, then a success message.
Success, error, infoOne-button messages with an icon.
Input promptAsk for a value, with validation.
Three choicesSave, Don’t save or Cancel when leaving an editor.
Auto closeCloses itself after 3 seconds, with a timer bar.
Async actionThe button shows a loader while the request runs.
Confirm Before Deleting
data-confirm="…"Add data-confirm to any delete link or button. After “Delete” is clicked, links open, submit buttons submit their form, and an odin:confirmed event is fired.
Quick Edit
About Us · /about-us
Languages