Modals

Explanation

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

Use the three buttons at the top of the Sandbox to toggle view modes. Clicking the menu button in the top left corner opens a menu to switch between files.

On GitHub

If you want to run this code locally, the source code is available on GitHub here.