Theme ➜ Bulma
Modal
Classic modal overlay to include any content you may need
Examples
Base
Show code
Teleport
Show code
Programmatically
Show code
Programmatically (with promises and async/await)
Show code
Class props
Click on "Inspect" button to open the modal
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| activeClass | Class of modal component when its active. | active | ||
| closeClass | Class of the close button. | |||
| contentClass | Class of the modal content. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied | |||
| fullScreenClass | Class of the modal when fullscreen. | fullScreen | ||
| mobileClass | Class of modal component when on mobile. 👉 Switch to mobile view to see it in action! | |||
| noScrollClass | Class of the modal when scroll is not clip. | scroll | ||
| overlayClass | Class of the modal overlay. | |||
| rootClass | Class of the root element. | |||
| scrollClipClass | Class of the modal when scroll is clip. | scroll |
Modal component
Classic modal overlay to include any content you may need
html
<o-modal></o-modal>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| active | Whether modal is active or not, use v-model:active to make it two-way binding | boolean | - | false |
| animation | Custom animation (transition name) | string | - | From config: modal: { |
| ariaLabel | Accessibility aria-label to be passed to the div wrapper element | string | - | From config: modal: { |
| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | dialog, alertdialog | From config: modal: { |
| autoFocus | Automatically focus modal when active | boolean | - | From config: modal: { |
| cancelable | Is Modal cancleable by clicking 'X', pressing escape or clicking outside | boolean | string[] | escape, x, outside, button, true, false | From config: modal: { |
| closeIcon | Close icon name | string | - | From config: modal: { |
| closeIconSize | Size of close icon | string | small, medium, large | From config: modal: { |
| component | Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — emits('close') | any | - | |
| content | Text content, unnecessary when default slot is used | string | - | |
| events | Events to be binded to the injected component | Record<string, any> | - | {} |
| fullScreen | Display modal as full screen | boolean | - | false |
| mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: modal: { |
| overlay | Show an overlay | boolean | - | From config: modal: { |
| override | Override existing theme classes completely | boolean | - | |
| props | Props to be binded to the injected component | Record<string, any> | - | {} |
| scroll | Use clip to remove the body scrollbar, keep to have a non scrollable scrollbar to avoid shifting background,but will set body to position fixed, might break some layouts. | "keep" | "clip" | keep, clip | From config: modal: { |
| teleport | Append the component to another part of the DOM. Set true to append the component to the body.In addition, any CSS selector string or an actual DOM node can be used. | string | boolean | Record<string, any> | - | From config: modal: { |
| trapFocus | Trap focus inside the modal | boolean | - | From config: modal: { |
| width | Width of the Modal | string | number | - | From config: modal: { |
Events
| Event name | Properties | Description |
|---|---|---|
| update:active | value boolean - updated active prop | active prop two-way binding |
| close | value unknown - close event data | on component close event |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Modal default content, default is content prop | close (...args): void - function to close the component |
Sass variables
Current theme ➜ Oruga
| SASS Variable | Default |
|---|---|
| $modal-content-background-color | var(--#{$prefix}white) |
| $modal-content-border-radius | var(--#{$prefix}base-border-radius) |
| $modal-overlay-background-color | hsla(0, 0%, 4%, 0.86) |
| $modal-close-border-radius | var( --#{$prefix}base-border-radius-rounded) |
| $modal-close-right | 20px |
| $modal-close-top | 20px |
| $modal-close-size | 32px |
| $modal-close-color | var(--#{$prefix}white) |
| $modal-content-fullscreen-background-color | #f5f5f5 |
| $modal-content-max-height | calc(100vh - 160px) |
| $modal-content-margin | 0 auto |
| $modal-zindex | 40 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
The theme does not have any custom variables for this component.