https://github.com/kouts/ractive-modal

A modal window component for Ractive
https://github.com/kouts/ractive-modal

dialog modal popup ractive

Last synced: about 2 months ago
JSON representation

A modal window component for Ractive

• Host: GitHub
• URL: https://github.com/kouts/ractive-modal
• Owner: kouts
• License: mit
• Created: 2017-05-26T13:57:14.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-04-01T19:44:39.000Z (about 4 years ago)
• Last Synced: 2025-03-08T20:44:44.685Z (3 months ago)
• Topics: dialog, modal, popup, ractive
• Language: HTML
• Homepage: https://kouts.github.io/ractive-modal/demo/
• Size: 144 KB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ractive-modal

A modal window component for Ractive

Features

- Lightweight, minified version is < **9kb**

- Opens and closes with a data variable

- Includes default styling but it's also highly customizable via user CSS classes and styles

- Modal intro and outro effects using CSS animations

- Exposes Component events - beforeOpen, opening, afterOpen, beforeClose, afterClose

- 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 trapps 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

- Ability to append to an element

Click here for documentation and examples

https://kouts.github.io/ractive-modal/demo/

# Development

In order to start development:

```sh

npm i

npm run watch

```