Modal Routes

Explanation

A "modal" route can display content on top of other content.

This example mimics the way that Pinterest works. Whether or not this is a good design pattern is up for debate, but at the very least it is helpful to see one way that you can do this with Curi.

When you navigate to a "modal route" from within the application, the content will be displayed in a modal window (preserving the background content from the page that the user navigated from). If you load the same location manually, it will render the location in a full window.

navigation.previous is used to render the base layer displayed under the modal. previous is the previous location's response object.

Knowing whether to render a modal window or a full page can be tricky. One approach is to use location.state to attach a value to the location that indicates that you want to render a modal. The downside of using state is that is is persistent across refreshes and the user clicking the browser's forward/back buttons, which means that you also have to take those into consideration when testing the modal's behavior.

Live Demo