# Modal

Classic modal overlay to include any content you may need

edit on github

# Examples

# Base

# Programmatically

# Props

Prop name Description Type Values Default
active Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding boolean -
component Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') object|func -
content Text content string -
programmatic boolean -
props Props to be binded to the injected component object -
events Events to be binded to the injected component object -
width Width of the Modal string|number - Config -> 'modal.width': 960
custom Enable custom style on modal content boolean -
animation Custom animation (transition name) string - Config -> 'modal.animation': 'zoom-out'
canCancel Can close Modal by clicking 'X', pressing escape or clicking outside array|boolean escape, x, outside, button Config -> 'modal.canCancel': ['escape'
onCancel Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) func - () => {}
scroll 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 string keep, clip Config -> 'modal.scroll': 'keep'
fullScreen Display modal as full screen boolean -
trapFocus Trap focus inside the modal. boolean - Config -> 'modal.trapFocus': true
ariaRole string -
ariaModal boolean -
destroyOnHide Destroy modal on hide boolean - Config -> 'modal.destroyOnHide': true
rootClass string -
backgroundClass string -
contentClass string -
closeClass string -
fullScreenClass string -

# Events

Event name Type Description
update:active undefined

# Style

CSS Variable SASS Variable Default
--oruga-modal-content-background-color $modal-content-background-color $white
--oruga-modal-content-padding $modal-content-padding 10px
--oruga-modal-content-border-radius $modal-content-border-radius $base-border-radius
--oruga-modal-background-background-color $modal-background-background-color hsla(0,0%,4%,.86)
--oruga-modal-close-border-radius $modal-close-border-radius $base-rounded-border-radius
--oruga-modal-close-height $modal-close-height 32px
--oruga-modal-close-right $modal-close-right 20px
--oruga-modal-close-top $modal-close-top 20px
--oruga-modal-close-width $modal-close-width 32px
--oruga-modal-content-fullscreen-background-color $modal-content-fullscreen-background-color #f5f5f5
--oruga-modal-content-max-height $modal-content-max-height calc(100vh - 160px)
--oruga-modal-content-margin $modal-content-margin 0 auto
--oruga-modal-mobile-breakpoint $modal-mobile-breakpoint 1024px
--oruga-modal-zindex $modal-zindex 40