chenjiahan / Vodal
Licence: mit
A Vue modal with animations.
Stars: ✭ 312
Projects that are alternatives of or similar to Vodal
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-90.38%)
Mutual labels: modal, dialog
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (-92.31%)
Mutual labels: modal, dialog
react-redux-modal-flex
[DEPRECATED] Make easy a modal/popup with Redux
Stars: ✭ 14 (-95.51%)
Mutual labels: modal, dialog
react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
Stars: ✭ 604 (+93.59%)
Mutual labels: modal, dialog
vue-modal
A customizable, stackable, and lightweight modal component for Vue.
Stars: ✭ 96 (-69.23%)
Mutual labels: modal, dialog
wechat-miniprogram-dialog
微信小程序弹窗组件 wxapp dialog component
Stars: ✭ 50 (-83.97%)
Mutual labels: modal, dialog
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (-76.28%)
Mutual labels: modal, dialog
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-93.27%)
Mutual labels: modal, dialog
react-redux-modals
This repo created for Medium.com: React/Redux: Modals and Dialogs
Stars: ✭ 30 (-90.38%)
Mutual labels: modal, dialog
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (-17.95%)
Mutual labels: dialog, modal
sweet-modal-vue
The sweetest library to happen to modals.
Stars: ✭ 762 (+144.23%)
Mutual labels: modal, dialog
ngx-simple-modal
A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
Stars: ✭ 50 (-83.97%)
Mutual labels: modal, dialog
vue-modal
Reusable Modal component, supports own custom HTML, text and classes.
Stars: ✭ 29 (-90.71%)
Mutual labels: modal, dialog
angular-custom-modal
Angular2+ Modal / Dialog (with inner component support).
Stars: ✭ 30 (-90.38%)
Mutual labels: modal, dialog
react-st-modal
Simple and flexible modal dialog component for React JS
Stars: ✭ 41 (-86.86%)
Mutual labels: modal, dialog
MultiDialog
MultiDialog utilizes jQuery UI Dialog Widget for a full featured Modalbox / Lightbox application.
Stars: ✭ 23 (-92.63%)
Mutual labels: modal, dialog
jquery.dialog.js
A lightweight replacement for the browser's default dialog boxes.
Stars: ✭ 17 (-94.55%)
Mutual labels: modal, dialog
bootstrap-modal-wrapper
Bootstrap modal factory that supports dynamic modal creations and nested stacked modal features.
Stars: ✭ 18 (-94.23%)
Mutual labels: modal, dialog
Vodal 
A vue modal with animations. Example
Installation
npm i -S vodal
Usage
<vodal :show="show" animation="rotate" @hide="show = false">
<div>A vue modal with animations.</div>
</vodal>
import Vue from 'vue';
import Vodal from 'vodal';
Vue.component(Vodal.name, Vodal);
export default {
name: 'app',
data() {
return {
show: false
}
}
}
// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";
Props
| Property | Type | Default | Description |
|---|---|---|---|
| width | number | 400 | width of dialog |
| height | number | 240 | height of dialog |
| measure | string | px | measure of width and height |
| show | bool | false | whether to show dialog |
| mask | bool | true | whether to show mask |
| closeButton | bool | true | whether to show close button |
| closeOnEsc | bool | false | whether close dialog when esc pressed |
| closeOnClickMask | bool | true | whether close dialog when mask clicked |
| animation | string | zoom | animation type |
| duration | number | 300 | animation duration |
| className | string | / | className for the container |
| customStyles | object | / | custom dialog styles |
| customMaskStyles | object | / | custom mask styles |
Event
| Name | Description |
|---|---|
| hide | triggers when dialog will hide |
| clickMask | triggers when mask clicked |
Animation Types
- zoom
- fade
- flip
- door
- rotate
- slideUp
- slideDown
- slideLeft
- slideRight
Other
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].