Sha256: 1735290657fa7ffafe06302e8e34a85c857c2b6bf3c12a2c495484104329ab69

Contents?: true

Size: 1.89 KB

Versions: 1

Compression:

Stored size: 1.89 KB

Contents

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>modalをcomponentで作る</title>
</head>

<style>
    #content {
        z-index: 10;
        width: 50%;
        padding: 1em;
        background: #fff;
    }

    #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;

    }
</style>

<body>
    <div id="app">

        <button v-on:click="openModal">Click</button>

        <open-modal v-show="showContent" v-on:from-child="closeModal">slotからモーダルウィンドウへ</open-modal>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('open-modal', {
            template: `
    <div id="overlay" v-on:click="clickEvent">
        <div id="content"　 v-on:click="stopEvent">
          <p><slot></slot></p>
          <button v-on:click="clickEvent">close</button>
        </div>
    </div>
    `,
            methods: {
                clickEvent: function () {
                    this.$emit('from-child')
                },
                stopEvent: function () {
                    event.stopPropagation()
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                showContent: false
            },
            methods: {
                openModal: function () {
                    this.showContent = true
                },
                closeModal: function () {
                    this.showContent = false
                },
            }
        })
    </script>
</body>

</html>

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
browser_app_base-0.1.0 lib/template/html/test.html