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でモーダルウィンドウを実装する方法について紹介しました。
以上で解説を終わります。