Modal

A light weight & flexible dialog prompts, with importance to accessibility.

GitHub

Demo

Basic

Funny, Modal Works 🥳

Hello Peeps from Vue-Simple-Modal!!

Funny, Modal Works 🥳

Wow!! Backdrop is blurred out 🔥

Close Methods

Can't close by clicking backdrop

Hello Peeps from Vue-Simple-Modal!!

Custom header and footer

Modal title

Hello Peeps from Vue-Simple-Modal!!

Custom   header has   Link

Wow!! 🔥

With footer

Hello, World. What's happening?

A Simple modal without header or footer

Top alignment

Modal title

Hello, World. What's happening?

Modal title

This is aligned top, with a custom top margin of 200px.

Sizes

Modal title

Hello. What's happening?

Modal title

Hello, Vue-Simple-Modal. What's happening?

Modal title

Hello, Vue-Simple-Modal. What's happening?

Modal title

Hello, Vue-Simple-Modal. What's happening?

Auto width modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scrolling Modal

This is a scrolling modal with a scale-up transition.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit maiores perspiciatis suscipit sit nemo. Similique dignissimos, quas nisi aperiam dolorum omnis tenetur impedit, cum eaque harum officia? Rerum ullam ratione non perferendis, vel harum quam.

Provident iste, iusto adipisci, tenetur harum porro omnis sequi eveniet, accusantium facilis non ipsum. Excepturi deleniti tempore error atque aperiam quia dolorum perferendis. Libero accusamus dolor ipsam soluta impedit laboriosam optio veritatis obcaecati atque, asperiores!

Quidem reprehenderit dolorem ducimus, expedita repellendus amet eaque voluptas molestiae debitis, adipisci obcaecati in nulla dolor eos ex illum. Quas molestiae dolores voluptatibus ullam et, quisquam nisi, consequuntur quod unde earum corporis nam harum repellat.

Dolores sapiente saepe a explicabo quia possimus obcaecati quasi, quod asperiores dolore velit animi in eligendi incidunt, corporis at ut ipsum quos inventore quas suscipit tempore voluptatem voluptates. Quae dicta magni commodi sed, nisi animi!

Itaque voluptas facere totam et explicabo, asperiores unde, cumque amet illo, hic sit excepturi quis architecto maxime. Aliquam nostrum ad blanditiis consequatur cum nulla, hic, reiciendis optio voluptate tenetur, maxime quisquam assumenda. Dignissimos corrupti, magnam.

Quia, dolor, dolores? Sed dolor, maxime, nihil et cupiditate adipisci vel, accusantium repellendus voluptate quisquam optio dolorem illum tenetur rem. Voluptatem, officiis. Autem porro totam non vitae, officiis, ad dolorum, architecto dolor ratione, sed eligendi.

Similique quidem, magni, dolores quam repellat provident? Sunt beatae ipsum, dignissimos eos iusto rem aspernatur unde commodi nam reprehenderit quis molestias accusantium. Enim quo beatae velit quisquam veritatis! Sed dolorem praesentium quidem consequuntur, impedit dolores?

Ab, illum necessitatibus dolorum fuga. Aspernatur repellat assumenda aliquid officia aut accusamus veniam ipsum temporibus, suscipit nulla quibusdam libero aperiam aliquam, molestias in, possimus nemo soluta vero sed architecto. Libero doloremque aliquid a quam nostrum.

Non quam et earum soluta quasi animi numquam perferendis magni explicabo impedit tempore ducimus aperiam natus veniam, eum esse, unde delectus velit nihil laudantium dolorum rem. Soluta dignissimos libero, laboriosam cupiditate, sint ipsum ab maiores.

Totam quas nobis iste iure voluptatem. Dolores tempore voluptates omnis inventore, laborum eaque aperiam eligendi, maxime beatae, exercitationem fugit. Quae non, eum dignissimos consequuntur voluptate vel ipsam quos minima sequi. Illum eius natus maxime reiciendis.

Install

npm i @vuesimple/vs-modal

Usage

<template>
  <button size="sm" @click="openModal('modal1')">Basic Modal</button>
  <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>

  <button size="sm" @click="openModal('backdrop-modal')">Basic Modal (with blur backdrop)</button>
  <vs-modal ref="backdrop-modal" backdropBlur title="Funny, Modal Works 🥳">
    Wow!! Backdrop is blurred out 🔥
  </vs-modal>
</template>

<script>
  import VsModal from '@vuesimple/vs-modal';

  export default {
    components: {
      VsModal,
    },

    methods: {
      openModal(ref) {
        this.$refs[ref].open();
      },

      closeModal(ref) {
        this.$refs[ref].close();
      },
    },
  };
</script>

CDN

<script src="https://unpkg.com/@vuesimple/vs-modal@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

// Main/Entry file
app.use(VsModal.plugin);

<template>
  <button size="sm" @click="openModal('modal1')">Basic Modal</button>
  <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
</template>

<script>
  export default {
    methods: {
      openModal(ref) {
        this.$refs[ref].open();
      },

      closeModal(ref) {
        this.$refs[ref].close();
      },
    },
  };
</script>

Nuxt.js

Nuxt Demo - Code Sandbox: Link

After installation,

• Create a file /plugins/vs-modal.js

  import Vue from 'vue';
  import VsModal from '@vuesimple/vs-modal';
  
  Vue.component('vs-modal', VsModal);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-modal', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <button size="sm" @click="openModal('modal1')">Basic Modal</button>
  
    <client-only>
      <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from V-Simple-Modal!! </vs-modal>
    </client-only>
  </template>
  
  <script>
    export default {
      methods: {
        openModal(ref) {
          this.$refs[ref].open();
        },
  
        closeModal(ref) {
          this.$refs[ref].close();
        },
      },
    };
  </script>

TIP

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsModal from '@vuesimple/vs-modal' & add in component:{VsModal} and use it within component, without globally installing in plugin folder.

Props

Name	Type	Default	Description
title	String	Modal title	The modal title (text only). For HTML, use the header slot.
size	String	m	The size of the modal. One of s, m, l, fullscreen, or auto. Setting the size to auto will make the modal's width grow to fit its content.
alignTop	Boolean	false	Whether or not the modal should be vertically aligned to the top of the viewport. When true, the modal will be top aligned, instead of vertically centered.
alignTopMargin	Number	60	The modal's distance from the top of the viewport, in pixels. Applies only when the alignTop prop is true.
role	String	dialog	The ARIA role for the modal (important for accessibility). One of dialog or alertdialog.
removeHeader	Boolean	false	Whether or not the modal header is removed.
removeCloseButton	Boolean	false	Whether or not the header close button is removed.
preventShift	Boolean	false	Whether or not to add a dummy scrollbar to the modal backdrop to prevent the modal shifting horizontally when the <body> scrollbar is hidden. Set to true to prevent the modal shift.
dismissible	Boolean	true	Whether or not the modal can be dismissed. Set to false to prevent the user from dismissing the modal. This will also hide the header close button.
dismissOn	String	backdrop close-button esc	The type of event or events that will cause the modal to be dismissed. One or more of backdrop, close-button, or esc. Separate multiple events with a space.

Events

Name	Description
open	Emitted when the modal starts to open. Listen for it using @open.
reveal	Emitted when the modal is revealed (i.e. when the transition completes). Listen for it using @reveal.
close	Emitted when the modal starts to close. Listen for it using @close.
hide	Emitted when the modal close transition completes. Listen for it using @hide.

Slots

You can define own item markup via #slot-name:

Name	Description
(default)	Holds the modal body and can contain HTML.
header	Holds the the modal header and can contain HTML.
footer	Holds the the modal footer and can contain HTML.