Confirm
#

A simple modal with message and ok and cancel buttons. Returns promise with true if ok clicked and false if cancel is clicked.

export default {
  methods: {
    onButtonClick() {
      this.$vaModal.confirm('Are you sure you want to see standard alert?')
        .then((ok) => ok && alert('This is standard browser alert'))
    },
  },
}
Open in GitHub

Props
#

Any prop from VaModal can be passed to confirm. Event listeners can be passed with on prefix. For example, onClickOutside.

Open in GitHub
NameDescriptionTypesDefault
allow-body-scroll

Allows the document scroll while modal is open.

Boolean

false

anchor-class

Set class name to the anchor slot container

String

-

aria-close-label

The aria-label of the close button

String

"$t:close"

attach-element

A valid selector of element, where modal will be rendered

String

"body"

background-color

The background color of the modal dialog

String

"background-secondary"

before-close

Function run before closing the modal

Function

-

blur

Use blur filter to overlay. Root css variable --va-modal-overlay-background-blur-radius sets the blur radius

Boolean

false

cancel-text

Text string to place in the default footer Cancel button

String

"$t:cancel"

disable-attachment

Ignore attach-element prop and render component as it's parent child

Boolean

false

fixed-layout

Use fixed-layout: true to scroll only content in modal. Title and actions will be fixed

Boolean

false

fullscreen

Add the fullscreen prop to cover the whole page

Boolean

false

hide-default-actions

Use hide-default-actions: true to hide Cancel and Ok buttons

Boolean

false

max-height

Use max-height to change the maximum height of the modal. If content is larger, scroll will appear

String

""

max-width

Use max-width to change the maximum width of the modal.

String

""

message

Content of modal body

String

""

mobile-fullscreen

Use mobile-fullscreen: false to disable fullscreen mode for mobile viewports

Boolean

true

model-value

The value of the v-model bindings.

Boolean

false

no-dismiss

Disable both close on overlay click and close on Esc

Boolean

false

no-esc-dismiss

Disable close on Esc

Boolean

false

no-outside-dismiss

Disable close on overlay click

Boolean

false

no-padding

Disable padding in the modal dialog

Boolean

false

ok-text

Text string to place in the default footer Ok button

String

"$t:ok"

onBeforeClose

Function to be called before closing

Function

onBeforeOpen

Function to be called before opening

Function

onCancel

Function to be called after cancel button is been pressed

Function

onClickOutside

Function to be called after clicking outside the modal

Function

onClose

Function to be called after closing

Function

onOk

Function to be called after pressing the "ok" button

Function

onOpen

Functiong to be called after opening the modal

Function

overlay

Use overlay: false to hide the overlay

Boolean

true

overlay-opacity

Set the overlay's opacity

Number | String

0.6

size

Set the size of the modal's width. "small", "medium" (default) or "large"

String

"medium"

title

Text content to place in the title

String

""

without-transitions

Use without-transitions: true to turn off the open and close animations on the modal

Boolean

false

z-index

Set the modal's z-index

Number | String

-

Events #

NameDescription

before-close

Emits before modal's start closing after transition started

before-open

Emits before modal's open after transition started

cancel

Emits when the user closes the modal window without side effects

click-outside

Emits when overlay is clicked

close

Emits when modal's is closed and transition is complete

ok

Emits when Ok button is clicked

open

Emits when modal's is open and transition is complete

update-model-value

The event is triggered when the component needs to change visibility