Simpel Modal is very simple Vue.js component for modal windows. Take a look.

To use this component you need to install Vue.js first.

If you use node, you can install simpel-modal component with npm or yarn:

npm i --save simpel-modal

yarn add simpel-modal

As an alternative you can reference the script and the styles in HTML code (the files can be found in /dist/ directory):

<link rel="stylesheet" href="/simpel-modal.css">
<script src="/simpel-modal.js"></script>

Once installed, you can register the component globally:

import SimpelModal from 'simpel-modal';

Vue.component('simpel-modal', SimpelModal)

Then it can be used in a template as:

<simpel-modal ref="greeting-modal">
  Hey!
</simpel-modal>

To control the component call .open() or .close() method through a reference:

methods: {
  openDemo() {
    this.$refs['greeting-modal'].open();
  },
  closeDemo() {
    this.$refs['greeting-modal'].close();
  },
},

| Name | Required | Type | Default | Description | | --- | --- | --- | --- | --- | | id | false | [String, Number] | random | Id of the modal container | | yOffset | false | Number | 0 | Vertical offset of the modal container | | fullscreen| false | Boolean | false | Enables fullscreen mode |

Supports nested modals