vue-modal

# v-model

Pass a Boolean value to the v-model directive to open and close the modal window.

# Props

Prop Description Type Default
title The title of the modal element String Empty
baseZindex The z-index style attribute of the modal window Number 1051
wrapperClass Extra CSS classes for the modal wrapper String, Object, Array Empty
bgClass Extra CSS classes for the modal backdrop String, Object, Array Empty
modalClass Extra CSS classes for the modal element String, Object, Array Empty
modalStyle Extra CSS styles for the modal element Object Empty
inClass Animation class for the modal intro String, Object, Array vm-fadeIn
outClass Animation class for the modal outro String, Object, Array vm-fadeOut
bgInClass Animation class for the modal backdrop intro String, Object, Array vm-fadeIn
bgOutClass Animation class for the modal backdrop outro String, Object, Array vm-fadeOut
appendTo Element (selector) in which the modal is to be inserted to, e.g '#modal-host'
This option should not be changed at runtime		 String body
live Controls whether the modal renders dynamically or stays hidden in the DOM
This option should not be changed at runtime		 Boolean false
enableClose Controls whether the modal window is closable or not Boolean true
basedOn Opens and closes the modal window, this is used by v-model internally. Boolean false
closeLabel The aria-label attribute of the close button String Close

# Slots

# default

The default slot to use for the content of the modal.

# titlebar

The slot to use for overriding the titlebar of the modal

Default value:

<div class="vm-titlebar">
  <h3 class="vm-title">
    {{ title }}
  </h3>
  <button
    v-if="enableClose"
    type="button"
    class="vm-btn-close"
    @click.prevent="close"
  ></button>
</div>

# content

The slot to use for overriding the content of the modal

Default value:

<div class="vm-content">
  <slot></slot>
</div>

# Events

Name Description
close Event that fires when dialog closes
before-open Event that fires before the modal opening transition starts
opening Event that fires while the modal opening transition is in progress
after-open Event that fires when the modal opening transition is finished
before-close Event that fires before the modal closing transition starts
closing Event that fires while the modal closing transition is in progress
after-close Event that fires when the modal closing transition is finished

← Basic →