ember-modals is an Ember addon that adds API-like functionality for rendering and managing modals in your Ember application. The primary purpose of this addon is to manage modal functionality in your JS whilst getting out of the way for styling and templating.
This allows you to match your styleguide and mockups precisely. However, basic stylesheets and animations are included and may be imported.
ember install:addon ember-modals
- Complete control over the context your modals renders in
- By default modals will render in the context of the current route
- Use multiple outlets with different modal views and overlays
- Action handling enables you to interact with modals from different areas of your app
- Easily customize animations (JS or CSS)
- Show multiple modals at the same time
- Import stylesheets for layout and animation
Please note, there may be backwards incompatible changes before v1.0.0.
Documentation, including setup, usage, customization, styling/animating, and development can be found in the wiki.
In absence of an online demo (WIP), you can clone this repo to your desktop and run ember s. You will see a lot of buttons that allow you to show preset modals. Each modal contains info about the context in which it's rendered.
The demo uses the 'scale' animation (see styling for more info).
If you have any issues or feature requests, please open an issue or submit a PR.
- Improved WAI-ARIA support and documentation (aria-haspopup for buttons and aria-label for modals)
- Expose a
resetModal()method to reset default properties - More Browser support for included stylesheets
- Test(s) for animation duration of modals
- Hitting esc should close the modal
- Online demo