Xmodal-Vue is a simplified, lightweight (5KB compressed), and an easy-to-use wrapper around your components that will help you create custom, dynamic, models from your components.

vue js modal popup example, vue js modal documentation, bootstrap 5 modal component, vue open modal from another component, v modal vue

iOS Style Modal Dialog Web and Mobile Component | pure-dialog

How to make use of it:

Install and download:

# Yarn
$ yarn add xmodal-vue

# NPM
$ npm i xmodal-vue

1. Import xmodal file.

import Vue from "vue";
import xmodal from "xmodal-vue";

2. Register the component.

export default {
  data() {
    return {
        ismodalOpen: false,
        // basic modal options
        options: {
            component: modal,
            backgroundColor: "#000000",
            opacity: "0.7",
            animation: "scaleLeft",
        },
    };
  }
};

3. Create a button to toggle the modal.

<template>
  <div id="app">
    <h1>xmodal</h1>
    <button @click="ismodalOpen = !ismodalOpen">open modal</button>
    <xmodal v-model="ismodalOpen" :params="options" />
  </div>
</template>

4. Add your own content to the modal.

// modal.vue
<template>
  <div class="modal">
    <h1>Modal Content</h1>
  </div>
</template>

5. Apply CSS styles to the modal.

.modal {
  width: 300px;
  height: 300px;
  background: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

6. All options and props are default.

//GLOBAL
component: {
  default: null
},
// MODAL OPTIONS
backgroundColor: {
  type: String,
  default: "#000000"
},
opacity: {
  type: String,
  default: "0.7"
},
hasTimer: {
  default: false
},
animation: {
  type: String,
  default: "fade"
},
isDisable: {
  type: Boolean,
  default: false
},
// COMPONENT OPTIONS
props: {
  type: Object,
  default: null
}

Dynamic And Custom Modal Component, Xmodal-Vue Plugin/Github

See Demo And Download

Official Website(mediv0): Click Here

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