Emberjs Modal as a route

[kaelin]

Usecase: In my application I need a modal with URL state that can be accessed from any route. The previous state should also be persisted so that I can return to it on closing the modal. In addition, when I directly access the route through the URL, the component should be loaded without the modal

The discussion that came closest to what i’m looking for is this, ember.js - Emberjs Modal as a route - Stack Overflow

The answer in the above discussion cannot be used here since I need it for all my routes.

similar question…

Modal dialogs (routes) accessible from anywhere in the app (preventing route deactivation)

I would like to create a modal dialog (route) that can be accessed from anywhere in the app, and not deactivate the current route. This is the user flow: The user is on any random route in the application The user receives an in-app notification something happened on a resource (let’s say a post). The notifications has a link to that resource (/posts/10) and I want it to be rendered in a modal dialog overlaying the current content When the user finishes with the post/modal dialog, he should b…

The difference in my usecase is that the modal will have a route that is not nested within the other routes in the app. If you are in the route ‘rootURL/some_route’, the modal when opened should have the following route ‘rootURL/modal_route’. When the modal is closed, the state should be returned to ‘rootURL/some_route’. But if you directly navigate to ‘rootURL/modal_route’, the same component that was used in the modal should be rendered as a page.

Any pointers on how this can be implemented?

[benking]

Hey, I had this problem before, so I published an addon that solves it - https://github.com/dbbk/ember-routable-modal

It works by capturing transitions to modal routes and cancelling them, so you can have a modal appear on top of a previous route, revert back to the previous route’s URL when you close it, and support navigating directly to the modal route URL with just the application template behind it.

From the sounds of it this should help, let me know if it doesn’t