Mobile-first Fullscreen Modal Popup Library For Vue

Description:

A responsive, mobile-friendly, fullscreen modal popup library for Vue.js.

How to use it:

1. Import and register the modal component.

import FullpageModal from 'vue-fullpage-modal'
Vue.use(FullpageModal)

2. Enable a button to toggle the modal popup.

<template>
  <div>
    <button @click="openModal">open</button>
  </div>
</template>
export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: myComponent,
          // more options here
        }, 
        { 
          msg: "Modal Popup Content" 
        }
      )
    }
  }
}

3. Hide the modal popup.

this.$FModal.hide();

4. Available options to customize the modal popup.

value: {
  type: Boolean,
  required: true
},
fpmId: {
  type: Number | String
},
maxHeight: {
  type: Number | String,
  default: '80%'
},
height: {
  type: Number | String
},
width: {
  type: Number | String,
  default: 800
},
backgroundColor: {
  type: String,
  default: '#fff'
},
clickToClose: {
  type: Boolean,
  default: true
},
escToClose: {
  type: Boolean,
  default: true
},
placement: {
  type: String,
  default: 'center bottom'
},
modalStyles: {
  type: String | Object | Array
},
overlayStyles: {
  type: String | Object | Array
},
contentStyles: {
  type: String | Object | Array
}

Preview:

Mobile-first Fullscreen Modal Popup Library For Vue

Changelog:

v0.5.3 (06/15/2021)

  • feat: restore on unexpected destroying

v0.5.1 (06/07/2021)

  • fix: undefined event handler

v0.5.0 (06/04/2021)

  • feat: add onClose prop

v0.3.2 (05/26/2021)

  • update

v0.3.0 (05/24/2021)

  • feat: add animation prop

v0.2.3 (05/22/2021)

  • chore: change css declaration order

Download Details:

Author: medistream-team

Live Demo: https://medistream-team.github.io/vue-fullpage-modal/examples/#basic-modal

Download Link: https://github.com/medistream-team/vue-fullpage-modal/archive/refs/heads/master.zip

Official Website: https://github.com/medistream-team/vue-fullpage-modal

Install & Download:

# NPM
$ npm i vue-fullpage-modal

You Might Be Interested In:

Add Comment