> For the complete documentation index, see [llms.txt](https://jho406.gitbook.io/breezy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jho406.gitbook.io/breezy/dev/recipes/modals.md).

# Modals

Modals are easy. Let us imagine the following urls:

1. `/seats` - This shows a stadium map of available seats.
2. `/seats/1` - This shows the status of a single seat as a modal over the map

   of seats.

Visually, the only difference between the two pages is the modal. So we model our application as such.

In `/seats/index.json.props`

```ruby
# Other index.json.props content here
...

json.seat_details do
  json.show false
  # empty
end
```

In `/seats/show.json.props`

```ruby
# Other index.json.props content here
...

json.seat_details do
  json.show true

  # Add additional modal content here.
end
```

In `packs/application.js`, change your component mapping to use your `ShowIndex` component as your identifier's component:

```
const identifierToComponentMapping = {
  'seats/index': SeatsIndex,
  'seats/show': SeatsIndex,
};
```

and in `Modal` component's render:

```javascript
  if (props.show) {
    ....render modal with `props.seatDetails`
  } else {
    return null;
  }
```

and add a [UJS visit](https://github.com/jho406/Breezy/tree/8a5894412d5bd587a377107abb355eaa59285ef0/docs/recipes/navigation.md#single-page-navigation-using-visit) attribute to get the SPA modal effect with history change and back button support!

In `SeatsIndex.js`, change the `a` tags like so.

```javascript
  <a
    href="/seats/1"
    data-bz-visit={true}
   > Show Seat Modal </a>
```

## Optimize it!

The above solution will load the entirety of the `show.json.props`. That may not be what we want as some parts of the template may be slow.

Instead, we can make it more efficient by loading just the modal contents.

```javascript
  <a
    href="/seats/1?bzq=data.seat"
    data-bz-visit={true}
    data-bz-placeholder="/seats"
   > Show Seat Modal </a>
```

The change above uses Breezy's [copy feature](https://github.com/jho406/Breezy/tree/8a5894412d5bd587a377107abb355eaa59285ef0/docs/recipes/navigation.md#placeholders) to

1. Copy the current page, `/seats` and use it as a placeholder for `/seats/1`
2. Navigate to that page optimistically (as defined in our `identifierToComponentMapping`)
3. Query `show.json.props` and walk to the `data` node, then to the `seat` node,

   and return that.
4. Immutably graft it to the placeholder in `/seats/1` in the same location.
5. React will render with the modal contents.