Skip to content

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

'Classes applied to the element'

Classic modal overlay to include any content you may need

html
<o-modal></o-modal>

Props

Prop nameDescriptionTypeValuesDefault
activeWhether modal is active or not, use v-model:active to make it two-way bindingboolean-false
animationCustom animation (transition name)string-
From config:
modal: {
  animation: "zoom-out"
}
ariaLabelAccessibility aria-label to be passed to the div wrapper elementstring-
From config:
modal: {
  ariaLabel: undefined
}
ariaRoleRole attribute to be passed to the div wrapper for better accessibility.stringdialog, alertdialog
From config:
modal: {
  ariaRole: undefined
}
autoFocusAutomatically focus modal when activeboolean-
From config:
modal: {
  autoFocus: true
}
cancelableIs Modal cancleable by clicking 'X', pressing escape or clicking outsidestring[] | booleanescape, x, outside, button, true, false
From config:
modal: {
  cancelable: ["escape","x","outside","button"]
}
closeIconClose icon namestring-
From config:
modal: {
  closeIcon: "close"
}
closeIconSizeSize of close iconstringsmall, medium, large
From config:
modal: {
  closeIconSize: "medium"
}
componentComponent to be injected, used to open a component modal programmatically.
Close modal within the component by emitting a 'close' event — emits('close')
Component-
containerDOM element where the modal component will be created on (for programmatic usage)string | HTMLElement-
From config:
modal: {
  container: "body"
}
contentText content, unnecessary when default slot is usedstring-
destroyOnHideDestroy modal on hide - default true for programmatic usageboolean-
From config:
modal: {
  destroyOnHide: false
}
eventsEvents to be binded to the injected componentobject-{}
fullScreenDisplay modal as full screenboolean-false
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
modal: {
  mobileBreakpoint: undefined
}
onCancelCallback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)() => void-Default function (see source code)
onCloseCallback function to call after close (programmatically close or user canceled)() => void-Default function (see source code)
overrideOverride existing theme classes completelyboolean-
propsProps to be binded to the injected componentobject-
scrollUse 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.
stringkeep, clip
From config:
modal: {
  scroll: "keep"
}
teleportAppend 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.
boolean|string|object-
From config:
modal: {
  teleport: false
}
trapFocusTrap focus inside the modalboolean-
From config:
modal: {
  trapFocus: true
}
widthWidth of the Modalstring|number-
From config:
modal: {
  width: 960
}

Events

Event namePropertiesDescription
update:activevalue boolean - updated active propactive prop two-way binding
closevalue any - close event dataon component close event

Slots

NameDescriptionBindings
defaultModal default content, default is content propclose (...args): void - function to close the component

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$modal-content-background-color$white
$modal-content-border-radius$base-border-radius
$modal-overlay-background-colorhsla(0, 0%, 4%, 0.86)
$modal-close-border-radius$base-rounded-border-radius
$modal-close-right20px
$modal-close-top20px
$modal-close-size32px
$modal-close-color$white
$modal-content-fullscreen-background-color#f5f5f5
$modal-content-max-heightcalc(100vh - 160px)
$modal-content-margin0 auto
$modal-zindex40

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$modal-content-background-color$white
$modal-content-border-radius$base-border-radius
$modal-overlay-background-colorhsla(0, 0%, 4%, 0.86)
$modal-close-border-radius$base-rounded-border-radius
$modal-close-right20px
$modal-close-top20px
$modal-close-size32px
$modal-close-color$white
$modal-content-fullscreen-background-color#f5f5f5
$modal-content-max-heightcalc(100vh - 160px)
$modal-content-margin0 auto
$modal-zindex40

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.

Released under the MIT License.