# vue-modal 
  
A customizable, stackable, and lightweight modal component for Vue.
---
:fire: **HEADS UP!** You're currently looking at vue-modal branch for **Vue.js 2**.
If you're looking for a Vue.js 3 compatible version of vue-modal, [please check out the `next` branch](https://github.com/kouts/vue-modal/tree/next).
---
> vue-modal is designed with web applications in mind and tries to stick as much as possible
> to the accessibility best practices set in the [WAI-ARIA Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) section
> of W3C.
## Features at a glance
- Lightweight, minified gzipped version is < **4kb**
- Opens and closes with a data variable using ```v-model```
- Includes sensible default styling but it's also highly customizable via user CSS classes and styles
- Override modal title and content via slots
- Modal intro and outro effects using CSS animation classes
- Exposes Component events - `close`, `before-open`, `opening`, `after-open`, `before-close`, `closing`, `after-close`
- Scrollable when its contents exceed screen height
- Closeable by clicking on the upper right "x", the overlay or the ```esc``` key
- **Stackable** - Multiple modal windows on top of each other
- Ability to set initial focus on an element when the modal window opens, just set the **autofocus** attribute on an element inside the modal
- **Focus management** traps keyboard focus - tabbed navigation inside the modal window
- Ability to have unclosable modal windows
- Render on demand or stay always in DOM with "live" mode
- Modals appended to `````` by default, ability to append to a custom element
## Browsers support
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE11*, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
:warning: * **For IE11 Compatibility** an [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) polyfill is required.
---
Click here for documentation and examples
https://vue-modal-demo.netlify.app/
# Development
In order to start development:
```sh
npm i
npm run watch
```