-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Full-Stack Vue.js 2 and Laravel 5
By :

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