Closing

Users will need a way to close their modal and return to the main window. We'll overlay a button in the top-right corner that, when clicked, evaluates an expression to setmodalOpentofalse. Theshowclass on our wrapper p will consequentially be removed, which means the display CSS property will return tonone,thus removing the modal from the page.

index.html:

<p id="modal" v-bind:class="{ show : modalOpen }">
  <button v-on:click="modalOpen = false" class="modal-close">
 &times;
  </button>
  <p class="modal-content">
    <img src="sample/header.jpg"/>
  </p>
</p>

style.css:

.modal-close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0px 28px 8px;
  font-size: 4em;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  outline: none;
  color: #ffffff;
  z-index: 1000;
  font-weight: 100;
  line-height: 1;
}