logo small logo dark logo small logo
  1. Velonic
  2. Base UI
  3. Modals

Modals

Bootstrap Modals

A rendered modal with header, body, and set of actions in the footer.

Modal with Pages

Examples of custom modals.

Modal based Alerts

Show different contexual alert messages using modal component

Modal Position

Specify the position for the modal. You can display modal at top, bottom, center or right of page by specifying classes modal-top, modal-bottom, modal-dialog-centered and modal-right respectively.

Colored Header Modals

A rendered modal with header having contexual background color.

Filled Modals

A rendered modal with header, body and footer having contexual background color.

Multiple Modal

Display a series of modals one by one to guide your users on multiple aspects or take step wise input.

Toggle Between Modals

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.

Open first modal

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog

Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Varying Modal Content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked.

© Velonic - Theme by Techzaa
Theme Settings
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Topbar Color
Light
Dark
Menu Color
Light
Dark
Layout Position
Buy Now