vue.jsでモーダルウィンドウを作ってみた

今回はモーダルウィンドウとかライトボックスとかファンシーボックスとか、jQueryにはいろんなプラグインがありますけど、これをシンプルに作ってみたいと思います。

サンプルはgithubに置いておきますので、ご自由にお使いください。

https://github.com/kmtitmk-ux/vue-modal/tree/feature/vue-modal-0

クリックしたら表示される仕組み

ボタンをクリックしたらコンテンツが表示される仕組みは、vue.jsのv-ifを使って表示・非表示を制御しているだけです。

htmlの作成

v-on:clickは省略して@clickで記述しています。

そして、コンポーネント部分の<modal-item></modal-item>がクリックされると表示される部分となります。

<div id="app">
    <div class="d-flex justify-content-center mt-3 mb-3">
        <span @click="click_show" class="btn btn-info">開く</span>
    </div>
    <modal-item v-if="show"></modal-item>
</div><!--//app-->

jsでインスタンスの作成

インスタンスで設定したdataのshowがtrueになるかfalseになるかでコンテンツの表示を切り替えています。

@click=”click_show”で設定された関数が実行された時、this.showがtrueになり、表示されるようになります。

const app = new Vue({
    el: '#app',
    data: {
        show: false
    },
    methods: {
        click_show: function () {
            this.show = true;
        }
    }
})

jsでコンポーネントの作成

コンポーネントには、クリックしたら表示される要素を作成します。

表示される要素には、表示されたものを閉じる機能も必要ですね。

なので、@click=”modal_close”で閉じるボタンを作成し、モーダルで表示されたコンテンツ以外の部分をクリックしたときにも閉じられるように、modalのラップに@click=”except_modal_close”を設定します。

Vue.component('modal-item', {
    template: `
        <div id="modal" @click="except_modal_close">
            <div class="wrap">
                <span class="close" @click="modal_close">&times;</span>
                <p class="text-center">モーダルで表示させるコンテンツ。</p>
            </div>
        </div>
    `,
    methods: {
        modal_close: function () {
            app.$data.show = false;
        },
        except_modal_close: function (e) {
            if (this.$el == e.target) {
                app.$data.show = false;
            }
        }
    }
})

クリック時にイベントを取得することで、現在クリックした場所がどこの要素なのか取得することができます。

クリックで取得した要素が、モーダル表示の背景部分だった場合、つまりモーダル表示されたコンテンツ以外だった場合、show = falseでモーダルが閉じられるます。

文章で表現するのはなかなか難しいですね。

console.logを確認していくと理解できるかと思います。

サンプルはgithubに置いておきますので、ご自由にお使いください。

https://github.com/kmtitmk-ux/vue-modal/tree/feature/vue-modal-0

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、会社から独立するために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら