GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kouts → vue-modal

kouts / vue-modal

Licence: MIT license
A customizable, stackable, and lightweight modal component for Vue.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
SCSS
7915 projects
shell
77523 projects

Labels

vuedrawerpanela11ymodaldialogpopupsidebarsidebar-menuvue-modalstackablesidepanel

Projects that are alternatives of or similar to vue-modal

react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
Stars: ✭ 604 (+529.17%)
Mutual labels:  drawer, modal, dialog, popup
Popmodal
jquery plugin for showing tooltips, titles, modal dialogs and etc
Stars: ✭ 149 (+55.21%)
Mutual labels:  modal, dialog, popup
React Native Actions Sheet
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
Stars: ✭ 412 (+329.17%)
Mutual labels:  drawer, modal, dialog
Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (+157.29%)
Mutual labels:  modal, dialog, popup
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (+4.17%)
Mutual labels:  modal, dialog, popup
React Native Push Notification Popup
A <NotificationPopup/> component for presenting your own push notification in react-native app
Stars: ✭ 111 (+15.63%)
Mutual labels:  modal, dialog, popup
React Native Simple Dialogs
⚛ Cross-platform React Native dialogs based on the Modal component
Stars: ✭ 218 (+127.08%)
Mutual labels:  modal, dialog, popup
Sweetalert
A beautiful replacement for JavaScript's "alert"
Stars: ✭ 21,871 (+22682.29%)
Mutual labels:  modal, dialog, popup
Launchy
Launchy: An Accessible Modal Window
Stars: ✭ 89 (-7.29%)
Mutual labels:  a11y, modal, dialog
A11y Dialog
A very lightweight and flexible accessible modal dialog script.
Stars: ✭ 1,768 (+1741.67%)
Mutual labels:  a11y, modal, dialog
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (-22.92%)
Mutual labels:  modal, dialog, popup
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+1203.13%)
Mutual labels:  modal, dialog, popup
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (-18.75%)
Mutual labels:  modal, dialog, popup
Svelte Simple Modal
A simple, small, and content-agnostic modal for Svelte v3
Stars: ✭ 130 (+35.42%)
Mutual labels:  modal, dialog, popup
React Native Alert Pro
The Pro Version of React Native Alert (Android & iOS)
Stars: ✭ 69 (-28.12%)
Mutual labels:  modal, dialog, popup
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+2396.88%)
Mutual labels:  modal, dialog, popup
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-78.12%)
Mutual labels:  modal, dialog, popup
Popupdialog
A simple, customizable popup dialog for iOS written in Swift. Replaces UIAlertController alert style.
Stars: ✭ 3,709 (+3763.54%)
Mutual labels:  modal, dialog, popup
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (-75%)
Mutual labels:  a11y, modal, dialog
Vue Final Modal
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
Stars: ✭ 128 (+33.33%)
Mutual labels:  a11y, modal, dialog
View All Similar Projects ➔

vue-modal

A customizable, stackable, and lightweight modal component for Vue.

🔥 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.

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) 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 it's 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 <body> by default, ability to append to a custom element

Browsers support

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Opera
Opera
IE11*, Edge last 2 versions last 2 versions last 2 versions last 2 versions

⚠️ * For IE11 Compatibility an Object.assign polyfill is required.

Click here for documentation and examples https://vue-modal-demo.netlify.app/

Development

In order to start development:

npm i
npm run watch
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].