Written by Kasumi

Vue.jsでモーダルウィンドウを実装する方法【簡単】

Vue.jsとCSSで、モーダルウィンドウを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
Vue.js モーダルウィンドウ
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

【ここをクリック!】をタップすると、モーダルウィンドウが開きます。

モーダル内の【閉じる】、背景のレイヤーをクリックするとモーダルウィンドウが閉じます。

実装手順は以下の通りです。

HTML

<div id="app">
<!--  クリック要素  -->
  <span v-on:click="open" class="modal_open_btn">ここをクリック!!</span>
<!--  モーダルウィンドウ  -->
    <div v-show="show" class="modal_contents">
<!-- モーダルウィンドウの背景 -->
      <div v-on:click="close" class="modal_contents_bg"></div>
<!--   モーダルウィンドウの中身   -->
      <div class="modal_contents_wrap">
        <p>モーダルウィンドウ</p>
<!--   モーダルウィンドウを閉じる   -->
          <span v-on:click="close" class="modal_close_btn">閉じる</span>
        </div>
    </div>
</div>

まず最初にモーダルウィンドウのHTML要素を作成します。

モーダルウィンドウを開く為のクリック要素を作成。
v-on;click属性を指定、値にopenを入れます。

モーダルウィンドウ要素を作成。
v-show属性を指定、値にshowを入れます。

モーダルウィンドウの背景を作成。
v-on;click属性を指定、値にcloseを入れます。

モーダルウィンドウの中身を作成。

モーダルウィンドウを閉じる要素を作成。
v-on;click属性を指定、値にcloseを入れます。

HTMLは以上です。

CSS

/* モーダルウィンドウを開く要素 */
.modal_open_btn {
  display: inline-block;
  cursor: pointer;
  padding-top: 30px;
}
/* モーダルウィンドウ要素 */
.modal_contents {
  position: absolute;
  top: 0;
  left: 0;
  z-index:100;
  width: 100%;
  height: 100%;
  width: 100%;
}
/* モーダルウィンドウの背景要素 */
.modal_contents_bg {
  background: rgba(0,0,0,.8);
  width: 100%;
  height: 100%;
}
/* モーダルウィンドウの中身*/
.modal_contents_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 50%;
  height: 50%;
  margin: auto;
  transform: translate(-50%,-50%);
  padding: 30px;
}
/* モーダルウィンドウを閉じる要素 */
.modal_close_btn {
  display: inline-block;
  cursor: pointer;
  margin-top: 10px;
}

次にモーダルウィンドウをCSSを使って装飾します。

上記コード例では、positionとtransformプロパティを使って、モーダルウィンドウの中身を中央寄せで且つコンテンツ幅がビューポートに対して50%の比率を維持した作りになってます。

任意でモーダルウィンドウを装飾しましょう。

Vue.js

const app = Vue.createApp({
  data() {
    return {
//デフォルトはモーダルウィンドウを閉じる
    show: false
  }
  },
  methods:{
//モーダルウィンドウを開く要素をクリックしたら
    open: function(){
      this.show = true
    },
//モーダルウィンドウを閉じる要素をクリックしたら
    close: function(){
      this.show = false
    },
  }
});
app.mount("#app");

最後に動的部分をVue.jsで作ります。

dataメソッドにモーダルウィンドウ要素に指定したv-show属性の値(show)を入れます。

真偽値でfalseを入れ、デフォルトはモーダルが閉じた設定にしておきます。

openメソッドcloseメソッドをメソッドオプション内に定義。

v-on:click属性が付与された要素をクリックしたらv-showディレクティブの真偽値がfalse、trueに変更されるようにします。

以上でモーダルウィンドウの完成です。

まとめ

Vue.jsでモーダルウィンドウを実装する方法について紹介しました。

以上で解説を終わります。

関連記事

Vue.js

Vue.jsで配列要素を動的に追加する方法

2022.09.14
113
Vue.js

【簡単】Vue.jsとCSSを使ってハンバーガーメニューを実装する方法

2022.09.16
95
Vue.js

Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

2022.09.13
97
Vue.js

Vue.jsでinputタグに入力された文字数をカウントし、制限をかける方法

2022.09.12
111