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

今回は、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のコードは以下のとおりです。