Confirm
#

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

Options Api

Composition Api

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'))
    },
  },
}

Props
#

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

Name	Description	Types	Default
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`	-

Name	Description
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

Confirm #

Props #

Events #

Confirm
#

Props
#