Mobile-friendly Modal Popup component for Vue.js

Vue Final Modal is a modular, small-format, minimalist, mobile-friendly, feature-rich component of Vue.js. You can easily create a higher-order component and you can customize the template, script, and style based on your needs.

animated modal popup using jquery, multiple modal popup jquery, best javascript modal library, best modal popup design, jquery modal popup, best modal library

Features

Support Vue 3, Vue 2 and Nuxt
Tailwind CSS friendly
Renderless component
Tiny bundle size
Support stackable, detachable, scrollable, draggable, resizable, transition, accessibility, focusTrap, dynamic modal

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-final-modal

# NPM
$ npm i vue-final-modal

1. Import and register the conditional component.

import { VueFinalModal } from 'vue-final-modal'
export default {
  components: {
    VueFinalModal
  }
}

// or
import { VueFinalModal } from 'vue-final-modal'
Vue.component('VueFinalModal', VueFinalModal)

2. Add the conditional component to the template.

<vue-final-modal v-model="showModal">
  Modal Content Here
</vue-final-modal>

3. Create a button to switch between media.

<base-button @click="showModal = true">
  Launch
</base-button>

4. All props are default.

{
  value: { type: Boolean, default: false },
  ssr: { type: Boolean, default: true },
  classes: { type: [String, Object, Array], default: '' },
  overlayClass: { type: [String, Object, Array], default: '' },
  contentClass: { type: [String, Object, Array], default: '' },
  styles: { type: [String, Object, Array], default: '' },
  overlayStyle: { type: [String, Object, Array], default: '' },
  contentStyle: { type: [String, Object, Array], default: '' },
  lockScroll: { type: Boolean, default: true },
  hideOverlay: { type: Boolean, default: false },
  clickToClose: { type: Boolean, default: true },
  escToClose: { type: Boolean, default: false },
  preventClick: { type: Boolean, default: false },
  attach: { type: null, default: false, validator: validateAttachTarget },
  transition: { type: String, default: 'vfm' },
  overlayTransition: { type: String, default: 'vfm' },
  zIndexAuto: { type: Boolean, default: true },
  zIndexBase: { type: [String, Number], default: 1000 },
  zIndex: { type: [Boolean, String, Number], default: false },
  focusRetain: { type: Boolean, default: true },
  focusTrap: { type: Boolean, default: false }
}

Mobile-friendly Modal Popup Library For Vue, Vue Final Modal Plugin/Github, jquery popup modal on click, javascript modal popup