Skip to content

Modal

The Modal component is classic modal overlay, in which you can include any content you like.

Examples

Base

Teleport

The teleport prop allows the modal to be "teleported" into any DOM node outside the DOM hierarchy of that component. By default, if only a boolean is passed, the modal will be teleported to the document body. In addition, any other destination can be passed as a value to the teleport prop.

Dynamic Component

Instead of using the default slot, the component prop allows to pass any component that will be programmatically rendered inside the modal. Furthermore, an inline component created with a render function can also be passed. Props and events can be passed to the component with props and events props too.

Programmatically

This component provides a programmatic interface that can be accessed by the useOruga() composable.

Programmatically (with promises and async/await)

A programmatic instance returns a promise to await for. The promise gets resolved when the modal gets closed.

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
}
autoFocusAutomatically focus modal when activeboolean-
From config:
modal: {
  autoFocus: true
}
cancelableIs Modal cancleable by clicking 'X', pressing escape or clicking outsideboolean | string[]escape, x, outside, button, true, false
From config:
modal: {
  cancelable: ["escape","x","outside"]
}
clipScrollSet true to remove the body scrollbar.
When false, a non-scrollable scrollbar will be kept to avoid moving the background,
but will set the body to a fixed position, which may break some layouts.
boolean-
From config:
modal: {
  clipScroll: false
}
closeIconClose icon namestring-
From config:
modal: {
  closeIcon: "close"
}
closeIconSizeSize of close iconstringsmall, medium, large
From config:
modal: {
  closeIconSize: "medium"
}
componentComponent to be injected.
Close the component by emitting a 'close' event — $emit('close')
Component-
contentText content, unnecessary when default slot is usedstring-
eventsEvents to be binded to the injected component{}-
fullScreenDisplay modal as full screenboolean-false
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
modal: {
  mobileBreakpoint: undefined
}
overlayShow an overlayboolean-
From config:
modal: {
  overlay: true
}
overrideOverride existing theme classes completelyboolean-
propsProps to be binded to the injected componentany-
roleRole attribute to be passed to the div wrapper for better accessibility."alertdialog" | "dialog"dialog, alertdialog
From config:
modal: {
  role: "dialog"
}
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 | object | string-
From config:
modal: {
  teleport: false
}
trapFocusTrap focus inside the modalboolean-
From config:
modal: {
  trapFocus: true
}
widthWidth of the Modalnumber | string-
From config:
modal: {
  width: 960
}

Events

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

Slots

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

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
mobileClassClass of the root element when on mobile.
👉 Switch to mobile view to see it in action!
activeClassClass of the root element when active.active
overlayClassClass of the overlay element.
contentClassClass of the content element.
fullScreenClassClass of the content element when fullscreen.fullScreen
closeClassClass of the close button element.
scrollClipClassClass of the body when is open and scroll is clipped.clipScroll
scrollKeepClassClass of the body when is open and scroll is keeped.clipScroll

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$modal-content-background-colorvar(--#{$prefix}white)
$modal-content-border-radiusvar(--#{$prefix}base-border-radius)
$modal-overlay-background-colorhsla(0, 0%, 4%, 0.86)
$modal-close-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$modal-close-right20px
$modal-close-top20px
$modal-close-size32px
$modal-close-colorvar(--#{$prefix}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.