Vueコード

雛形コードを元に Vue.js を用いて実装していきましょう。

1. モーダルの中身を v-show で管理する。

#1-1. v-show とは？

HTMLの要素に v-show="条件" を書くことで条件の真偽によって描画を切り替える事ができます。v-show は条件がtrueの場合にのみ描画されます。

#1-2. 変数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    isShow: false,　// 追加
  },
});

#1-3. モーダルの中身に v-show を記載する。

index.html

  <!-- v-showディレクティブを記載する -->
  <!-- isShowがtrueの時のみ描画される -->
<div v-show="isShow" class="modal"> 
  <div class="modal__inner">
    <p class="modal__header">タイトル</p>
    
    <div class="modal__body">
      モーダルを表示しています。
    </div>
    
    <div class="modal__footer">
      <button class="modal__btn">閉じる</button>
    </div>
  </div>
  
  <div class="modal__bg"></div>
</div>

2. モーダルを v-on:click で表示しましょう。

#2-1. v-on:click とは？

**** HTMLの要素に v-on:click="関数" と書く事でその要素がクリックされた時に methods 内で用意した関数を実行する事ができます。また v-on: ディレクティブはよく使う為 @で省略して書く事ができます。@click="関数"

#2-2. 関数を用意する。

関数は methods オプションの中に記載します。 data オプション内のデータは this.データ名で参照して変更する事ができます。

app.js

new Vue({
  el: '#app',
  data: {
    isShow: false,
  },
  methods: {
    showModal() { 
      this.isShow = true; // 追加
    },
  },
});

#2-3. v-on:click を記載する。

index.html

<div class="container" id="app">
  <h1 class="container__title">ボタンを押すとモーダルが開きます。</h1>
  
  <!-- v-onディレクティブを記載する。 -->
  <!-- クリックされるとshowModalが実行される -->
  <button class="container__btn" @click="showModal">表示</button>
  
  <div v-show="modal.isShow" class="modal">
    <!-- 省略: モーダルの中身 -->
  </div>
</div>

3. モーダルを v-on:click で非表示にしましょう。

#3-1. 変数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    isShow: false,
  },
  methods: {
    showModal() {
      this.isShow = true;
    },
    hiddenModal() {
      this.isShow = false; // 追加
    },
  },
});

#3-2. v-on:click を記載する。

index.html

<div v-show="isShow" class="modal"> 
  <div class="modal__inner">
    <p class="modal__header">タイトル</p>
    
    <div class="modal__body">
      モーダルを表示しています。
    </div>
    
    <div class="modal__footer">
      <!-- v-onディレクティブを記載する。 -->
      <!-- クリックされるとhiddenModalが実装される。 -->
      <button class="modal__btn" @click="hiddenModal">閉じる</button>
    </div>
  </div>
  
  <!-- 背景色にも v-onディレクティブを記載する。 -->
  <div class="modal__bg" @click="hiddenModal"></div>
</div>