Image modal window

To prevent our header image from dominating the page, we've cropped it and limited its height. But what if the user wants to see the image in its full glory? A great UI design pattern to allow the user to focus on a single item of content is a modal window.

Here's what our modal will look like when opened:

Figure 2.10. Header image modal

Our modal will give a properly scaled view of the header image so the user can focus on the appearance of the lodgings without the distraction of the rest of the page.

Later in the book, we will insert an image carousel into the modal so the user can browse through a whole collection of room images!

For now, though, here are the required features for our modal:

1. Open the modal by clicking the header image
2. Freeze the main window
3. Show the image
4. Close the modal window with a close button or the Escape key

Opening

First, let's add a Boolean data property that will represent the opened or closed state of our modal. We'll initialize it to false.

app.js:

data...