Properties

You can use Live demo to toggle properties to see the effect by yourself.

Overview the default value of properties

<template>
  <vue-final-modal
    :name="null"
    :value="false"
    :ssr="true"
    :classes="false"
    overlay-class=""
    content-class=""
    styles=""
    overlay-style=""
    content-style=""
    :lock-scroll="true"
    :hide-overlay="false"
    :click-to-close="true"
    :esc-to-close="false"
    :prevent-click="false"
    :attach="false"
    transition="vfm"
    overlay-transition="vfm"
    :z-index-auto="true"
    :z-index-base="1000"
    :z-index="false"
    :focus-retain="true"
    :focus-trap="false"
    :fit-parent="true"
    :drag="false"
    drag-selector=""
    :keep-changed-style="false"
    :resize="false"
    :resize-directions="['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']"
    :min-width="0"
    :min-height="0"
    :max-width="Infinity"
    :max-height="Infinity"
  >
    ...modal content
  </vue-final-modal>
</template>

name

  • Type: String
  • Default: null

Modal name for the API $vfm.show(name), $vfm.hide(name), etc.

v-model is necessary when you open a modal with $vfm.show(name) .

ssr

  • Type: Boolean
  • Default: true

Enabled Server-Side Rendering.

classes

  • Type: [String, Object, Array]
  • Default: ''

Custom class names for the modal container.

content-class

  • Type: [String, Object, Array]
  • Default: ''

Custom class names for the modal content.

overlay-class

  • Type: [String, Object, Array]
  • Default: ''

Custom class names for the modal overlay.

styles

  • Type: [Object, Array]
  • Default: {}

Style that will be applied to the modal container.

content-style

  • Type: [Object, Array]
  • Default: {}

Style that will be applied to the modal content.

overlay-style

  • Type: [Object, Array]
  • Default: {}

Style that will be applied to the modal overlay.

transition

  • Type: [String, Object]
  • Default: 'vfm'

CSS transition applied to the modal container.

Show default transition CSS
.vfm-enter-active,
.vfm-leave-active {
  transition: opacity 0.2s;
}
.vfm-enter,
.vfm-leave-to {
  opacity: 0;
}
Show example transition Object
<template>
  <vue-final-modal
    :transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"
  >
    ...modal content
  </vue-final-modal>
</template>

overlay-transition

  • Type: [String, Object]
  • Default: 'vfm'

CSS transition applied to the modal overlay.

Show default transition CSS
.vfm-enter-active,
.vfm-leave-active {
  transition: opacity 0.2s;
}
.vfm-enter,
.vfm-leave-to {
  opacity: 0;
}
Show example transition Object
<template>
  <vue-final-modal
    :transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"
  >
    ...modal content
  </vue-final-modal>
</template>

keep-overlay

  • Type: Boolean
  • Default: false

If keep-overlay is false, the overlay will be removed when open multiple modals. If keep-overlay is true, the overlay will not be removed when open multiple modals.

lock-scroll

  • Type: Boolean
  • Default: true

Disabled the scrolling of body while the modal is displayed.

Using body-scroll-lock to implement the feature.

hide-overlay

  • Type: Boolean
  • Default: false

Hiding the display of the overlay.

click-to-close

  • Type: Boolean
  • Default: true

Enabled closing the modal by clicking overlay of the modal.

esc-to-close

  • Type: Boolean
  • Default: false

Press esc to close the modal.

prevent-click

  • Type: Boolean
  • Default: false

The click event will not be blocked by overlay.
Set the root element of vue-final-modal style to pointer-events: none;.

attach

  • Type: Any
  • Default: false

Specifies which DOM element that this component should detach to.

  1. Set false will disabled this feature.
  2. String can be any valid querySelector, e.g. 'body', '#app'.
  3. Object can be any valid Node, e.g. this.$refs.container.

z-index-auto

  • Type: Boolean
  • Default: true

Auto binding z-index base on the prop z-index-base and adding 2 by each stackable modal. If zIndex is set, z-index-auto, z-index-base will be ignored.

z-index-base

  • Type: [String, Number]
  • Default: 1000

Calculate z-index automatically with z-index-base. If zIndex is set, z-index-auto, z-index-base will be ignored.

z-index

  • Type: [String, Number]
  • Default: false

Set specific z-index to root of the modal element. If zIndex is set, z-index-auto, z-index-base will be ignored.

focus-retain

  • Type: Boolean
  • Default: true

Focus the modal vfm__container after the modal enter.

focus-trap

  • Type: Boolean
  • Default: false

Enables focus trap meaning that only inputs/buttons that are withing the modal window can be focused by pressing Tab (plugin uses very naive implementation of the focus trap).

drag

  • Type: Boolean
  • Default: false

Enables draggable modal.

fit-parent

  • Type: Boolean
  • Default: false

Limit the x-axis, y-axis, width and height of the .vfm__content to not exceed the .vfm__container.

drag-selector

  • Type: String

  • Default: ''

  • Example:

    <vue-final-modal drag-selector=".modal-drag">
      <div class="modal-title modal-drag">...</div>
      <div class="modal-content">...</div>
      <div class="modal-action">...</div>
    </vue-fianl-modal>
    

Only the element that was selected by querySelectorAll(string) can trigger drag modal.

keep-changed-style

  • Type: Boolean
  • Default: false

Keep the style that was changed by drag and resize after modal closed.

resize

  • Type: Boolean
  • Default: false

Enables resizable modal.

resize-directions

  • Type: Array
  • Default: []
  • Valid value: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']

Active directions for resizable modal.

min-width

  • Type: Number
  • Default: 0

Limit min-width for resizable modal.

min-height

  • Type: Number
  • Default: 0

Limit min-height for resizable modal.

max-width

  • Type: Number
  • Default: Infinity

Limit max-width for resizable modal.

max-height

  • Type: Number
  • Default: Infinity

Limit max-height for resizable modal.

Edit this page on GitHub Updated at Fri, Feb 3, 2023