Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/adileo/vue-topmodal

A fully customisable Vue.js modal component.
https://github.com/adileo/vue-topmodal

alert dialog lightbox modal overlay popup vue vue2 vuejs

Last synced: about 1 month ago
JSON representation

A fully customisable Vue.js modal component.

Lists

README 

        


vue-popmodal






 






A fully customisable Vue.js modal component.




# Features

* Fully Customisable (borders, shadow, position, colors, backgrounds, width, etc...)

* Responsive

* Scrollable (with lock scroll on body)

* Stackable (with z-index)

* Animated (separate animations for background and modal window)

* Auto-close on background click

* Lightweight <15Kb

* Header / Footer / Content Slots



Demo: [jsFiddle](https://jsfiddle.net/adileo/eqah2189/)

# Getting started



1. Install the component:



```

npm install --save vue-topmodal

```

```

yarn add vue-topmodal

```



2. (Option A) Add the component into your app:



```javascript

import Vue from 'vue'

import TopModal from 'vue-topmodal'



Vue.component('top-modal', TopModal)

```



2. (Option B) Include JS & CSS:

```html



new Vue({

  components: {

    TopModal,

  },

  el: "#app",

})



```

3. Usage

```html



    

    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ipsum a dolor ultricies volutpat.

    

    



```

# Props

* `open` (Boolean): Open or close the modal.

* `z-index` (Number): Z-index of the modal.

* `bg` (String): Background behind the modal.

* `bg-image` (String): Background behind the modal, useful for images or gradients.

* `bg-animation` (String): Name of the animation to use. Default to `bg`

* `container-scrollable` (Boolean): Set to true if you want a scrollable modal.

* `column-position` (String): Set the horizontal alignment of the modal. Valid values are: `left`,`right`,`center`

* `column-right` (String): Space from right, eg. `10%`. Only valid if `column-position` is `right`.

* `column-left` (String): Space from left, eg. `10px`. Only valid if `column-position` is `left`.

* `column-max-width` (String): Set the max width of the modal. (for responsive use $mq | mq({...}) filters)

* `modal-animation` (String): Name of the animation to use. Default to `modal`

* `modal-position` (String): Set the vertical alignment of the modal. Valid values are: `top`,`bottom`,`center`

* `modal-top` (String): Space from top, eg. `10%`. Only valid if `modal-position` is `top`.

* `modal-bottom` (String): Space from bottom, eg. `10px`. Only valid if `modal-position` is `bottom`.

* `modal-border` (String): Border of the modal eg. `1px solid black`.

* `modal-border-radius` (String): Border radius of the modal. Eg. `5px`

* `modal-box-shadow` (String): Shadow of the modal

* `modal-height` (String): Height of the modal, default to `auto`

* `modal-background` (String): Background of the modal

* `content-padding` (String): Padding of the modal content slot. Default to `1em`

* `scroll-lock` (Boolean): Enable/Disable scroll lock. Enabled by default.



# Events

* `bg-click`: Fired when the user click on the background behind the modal

* `opened`: Open animation ended

* `closed`: Hide animation ended, modal closed and unmounted



# Slots

* `header`

* `content`

* `footer`



# Responsive

I suggest to use the [Vue mq](https://github.com/AlexandreBonaventure/vue-mq) plugin to modify the props based on the user device screen.

In this way you can modify the whole behaviour of the modal for different resolutions.

Eg:

```

:column-max-width="$mq | mq({

    sm: '350px',

    md: '500px',

    lg: '600px'

})"

```



# Structure



Structure




# Authors



* **Adileo Barone**



# License



This project is licensed under the MIT License



# Contributing



1. Fork it (https://github.com/adileo/vue-topmodal/fork)

2. Create your feature branch (git checkout -b feature/fooBar)

3. Commit your changes (git commit -am 'Add some fooBar')

4. Push to the branch (git push origin feature/fooBar)

5. Create a new Pull Request