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:

npm i
npm run watch