shaodahong / Vuejs Modal
Licence: mit
A simple、highly customizable vue modal plugin.
Stars: ✭ 32
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vuejs Modal
Css Components
☕️ A set of common UI Components using the power of CSS and without Javascript.
Stars: ✭ 592 (+1750%)
Mutual labels: modal
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (+2225%)
Mutual labels: modal
Webannoyances
Fix and remove annoying web elements such as sticky headers, floating boxes, floating videos, dickbars, social share bars and other distracting elements.
Stars: ✭ 831 (+2496.88%)
Mutual labels: modal
Mediumlightbox
Nice and elegant way to add zooming functionality for images, inspired by medium.com
Stars: ✭ 671 (+1996.88%)
Mutual labels: modal
React Modal
Accessible modal dialog component for React
Stars: ✭ 6,716 (+20887.5%)
Mutual labels: modal
Sweetalert
A beautiful replacement for JavaScript's "alert"
Stars: ✭ 21,871 (+68246.88%)
Mutual labels: modal
Django Admin Interface
django's default admin interface made customizable. popup windows replaced by modals. :mage: ⚡️
Stars: ✭ 717 (+2140.63%)
Mutual labels: modal
React Overlays
Utilities for creating robust overlay components
Stars: ✭ 809 (+2428.13%)
Mutual labels: modal
Sweet Modal Vue
The sweetest library to happen to modals.
Stars: ✭ 682 (+2031.25%)
Mutual labels: modal
Splarkcontroller
Custom transition between controllers. Settings controller for your iOS app.
Stars: ✭ 693 (+2065.63%)
Mutual labels: modal
React Native Raw Bottom Sheet
Add Your Own Component To Bottom Sheet Whatever You Want (Android and iOS)
Stars: ✭ 771 (+2309.38%)
Mutual labels: modal
Rmodal.js
A simple 1.2 KB modal dialog with no dependencies
Stars: ✭ 613 (+1815.63%)
Mutual labels: modal
Modal logic
Final Year Masters Project: modal logic solver tableaux
Stars: ✭ 16 (-50%)
Mutual labels: modal
Bootstrap Modal
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.
Stars: ✭ 5,039 (+15646.88%)
Mutual labels: modal
Vue Async Modal
Flexible modal component for Vue with ability of asynchronous lazy loading
Stars: ✭ 30 (-6.25%)
Mutual labels: modal
React Login Modal Sm
Customizable React Social Media login modal
Stars: ✭ 23 (-28.12%)
Mutual labels: modal
React Native Country Picker Modal
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
Stars: ✭ 775 (+2321.88%)
Mutual labels: modal
vuejs-modal
This plugin which works only with Vue 2.0+
A simple、highly customizable vue modal plugin.
Introduction
A file corresponds to a modal, and registered to vue prototype, so I can use it through this
, it gives me a state of a promise
, so I can get this modal state.
Installation
$ npm i vuejs-modal -S
Usage
import Modal from 'vuejs-modal'
// If you can use default template, you should be:
import confirm from 'vuejs-modal/lib/confirm.vue'
Vue.use(Modal, {
modals: {
confirm //default template
} //your modals, is a object
})
Use in component:
<template>
//html
</template>
<script>
export default {
methods: {
show: function () {
this.$modal.confirm().then( res => {
// I click ok button
}).catch( rej => {
// I click cancel button
})
}
}
}
</script>
options
Vue.use(Modal, {
// Use this in the component modal called the name, the default is $modal.
name: '$modal',
// modal div id name, the default is modal.
id: 'modal',
// your modals, is a object, the default is null
// this object key is called the modal name, value is a vue component.
modals: {
confirm: confirm.component
},
// modal default style, the default hava a z-index, it will be increment
style: {
position: 'fixed',
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: 1000
}
})
Event
// If you can click ok button, it can be resolve promise, and you can get params in then:
this.$emit('$ok', this.$el, params)
// If you can click cancel button, it can be reject promise, and you can get params in catch:
this.$emit('$cancel', this.$el, params)
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].