Opening

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

app.js:

data: {
  ...
  modalOpen: false
}

We'll make it so that clicking our header image will set the modal to open. We'll also overlay a button labelledView Photosin the bottom-left corner of the header image to give a stronger signal to the user that they should click to show the image.

index.html:

<p 
  class="header-img" 
  v-bind:style="headerImageStyle" 
  v-on:click="modalOpen = true"
>
  <button class="view-photos">View Photos</button>
</p>

Note that, by putting the click listener on the wrapping p,the click event will be captured regardless of whether the user clicks thebuttonor thepdue to DOM event propagation.

We'll add some more CSS to our header image to make the cursor apointer, letting the user know the header can be clicked, and giving the header a relative position so the button can be positioned within it. We'll also add rules to style the button.

style.css:

.header .header-img {
  ...
  cursor: pointer;
  position: relative;
}

button {
  border-radius: 4px;
  border: 1px solid #c4c4c4;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  line-height: 1.43;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  background: white;
  color: #484848;
  padding: 7px 18px;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 0;
}

.header .header-img .view-photos {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

Let's now add the markup for our modal. I've put it after the other elements in the page, though it doesn't really matter as the modal will be out of the regular flow of the document. We remove it from the flow by giving it afixed position in the following CSS.

index.html:

<p id="app">
  <p class="header">...</p>
  <p class="container">...</p>
  <p id="modal" v-bind:class="{ show : modalOpen }"></p>
</p>

The main modal p will act as a container for the rest of the modal content, but also as a background panel that will cover up the main window content. To achieve this, we use CSS rules to stretch it to completely cover the viewport by giving ittop,right,bottom,andleftvalues of0. We'll set thez-indexto a high number to ensure the modal is stacked in front of any other element in the page.

Note also that thedisplayis initially set tonone, but we're dynamically binding a class to the modal calledshow that gives it block display. The addition/removal of this class will, of course, be bound to the value ofmodalOpen.

style.css:

#modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
}

#modal.show {
  display: block;
}