<template>
  <div class="modal is-active" v-if="visible" @click="hide">
    <div class="modal-background" />

    <div class="modal-content">
      <!-- <p class="image is-4by3"> -->
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="" />
      <!-- </p> -->
    </div>
  </div>

  <button class="button" @click="show">modal</button>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class ImageModal extends Vue {
  visible = false;

  public created(): void {
    window.addEventListener("keydown", (e) => {
      if (e.key == "Escape") this.hide();
    });
  }

  private show(): void {
    this.visible = true;
  }

  private hide(): void {
    this.visible = false;
  }
}
</script>
