First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js.

material ui full page modal, full page modal css, full page modal popup, full page bootstrap  modal popup, how to create a full page modal

How to make use of it:

Install and download:

# NPM
$ npm i vue-fullpage-modal

1. Import and register the conditional component.

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

2. Enable the 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. Options available to customize 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
}

Mobile-first Fullscreen Modal Popup Library, vue fullpage modal Plugin/Github


See Demo And Download

Official Website(medistream-team): Click Here

This superior jQuery/javascript plugin is developed by medistream-team. For extra Advanced Usage, please go to the official website.

Share