Emberjs Modal as a route

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…

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?

1 Like

Hey, I had this problem before, so I published an addon that solves it - GitHub - dbbk/ember-routable-modal: An ember-cli addon for implementing URL-first modals.

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 :slight_smile:

1 Like