Last-Modified: 2022/05/22

Vue.jsでモーダルウィンドウを実装する方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsでモーダルウィンドウを実装する方法について、簡単に解説していきます。

HTML

Vue.jsを使えば少し簡単にモーダルウィンドウを実装できます。

サンプルを作りましたので、まず、HTMLのコードを以下に示します。

<div id="app">
    <button type="button" @click="openModalWindow">開く</button>
    <modal-window v-show="isShow" @close="closeModalWindow"></modal-window>
</div>

上記のコードでは、モーダルウィンドウを開くボタンと、モーダルウィンドウのコンポーネントを使用しています。

CSS

CSSでは以下のように全体を覆う要素とモーダルウィンドウの要素を仕上げています。

#overlay {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
#modalWindow {
    z-index: 2;
    width: 500px;
    height: 250px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

上記の例では、全体を覆う要素はここではoverlayというidのdiv要素で、ウィンドウ全体を覆うように設定されています。

また、モーダルウィンドウはここではmodalWindowのidを持つdiv要素となり、overlayのidを持つdiv要素より前面に表示しています。

Vue.js

肝心のVue.jsのコードは以下のとおりです。

var app = new Vue({
    el: '#app',
    data: function() {
        return {
            isShow: false,
        }
    },
    components: {
        'modal-window': {
            template: '<div id="overlay"><div id="modalWindow"><button type="button" @click="$emit(\'close\')">閉じる</button></div></div>'
        }
    },
    methods: {
        openModalWindow: function() {
            this.isShow = true;
        },
        closeModalWindow: function() {
            this.isShow = false;
        }
    }
});

上記のコードの中で、isShowは肝となるプロパティでtrueとfalseでモーダルウィンドウの表示を制御しています。

そして、開くボタンでopenModalWindowメソッドを、閉じるボタンでcloseModalWindowメソッドを呼ぶような作りにしています。

• facebook
• Tweet
• Read Later