Mobile-friendly Modal Popup Library For Vue – Final Modal

Description:

Final Modal is a tiny, elegant, renderless, mobile-friendly, feature-rich modal window component for Vue.js.

More Features:

  • SSR support
  • Stackable
  • Detachable
  • Scrollable
  • Smooth Transitions
  • Vue.js compatible

Basic usage:

1. Import and register the modal 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 modal component to the template.

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

3. Create a button to toggle the modal.

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

4. All default props.

value: { type: Boolean, default: false },
ssr: { type: Boolean, default: true },
classes: { type: CLASS_TYPES, default: '' },
overlayClass: { type: CLASS_TYPES, default: '' },
contentClass: { type: CLASS_TYPES, default: '' },
lockScroll: { type: Boolean, default: true },
hideOverlay: { type: Boolean, default: false },
clickToClose: { type: Boolean, default: true },
preventClick: { type: Boolean, default: false },
attach: { type: null, default: false, validator: validateAttachTarget },
transition: { type: String, default: 'vfm' },
overlayTransition: { type: String, default: 'vfm' },
zIndexBase: { type: [String, Number], default: 1000 },
zIndex: { type: [Boolean, String, Number], default: false }

5. Events.

  • @before-open: Before open
  • @opened: When opened
  • @before-close: Before close
  • @closed: After closed

Previews:

Final Modal

Changelog:

v0.13.4 (09/28/2020)

  • fixed css transition
  • call handleLockScroll only when value is true

v1.0.0beta (09/22/2020)

  • Support Vue 3.0

v0.13.3 (09/16/2020)

  • fixed body-scroll-lock on mobile

v0.13.1 (09/02/2020)

  • Fixed: Modal DOM element should be removed at beforeDestroy hook

v0.13.0 (09/01/2020)

  • Add new prop zIndexBase.
  • Support auto binding zIndex with modalStackIndex.
  • Fixed computed isComponentReadyToBeDestroyed.
  • Refactor VueFinalModal style.
  • Set prop attach default from body to false.

Download Details:

Author: hunterliu1003

Live Demo: https://hunterliu1003.github.io/vue-final-modal/examples

Download Link: https://github.com/hunterliu1003/vue-final-modal/archive/master.zip

Official Website: https://github.com/hunterliu1003/vue-final-modal

Install & Download:

You Might Be Interested In:

Add Comment