<!-- template for the modal component --> <script type="text/x-template" id="modal-template"> <transition name="modal"> <div class="m-modal-overlay"> <div class="m-modal-wrapper"> <div class="m-modal-header"> <slot name="title"></slot> <a href="#" class="m-modal-close" @click.stop.prevent="$emit('close')"> <!-- This is because I'm using FontAwesome --> <i class="fa fa-times"></i> </a> </div> <div class="m-modal-body"> <slot name="body"></slot> </div> </div> </div> </transition> </script> <!-- app --> <div id="app"> <button @click="displayModal = true">Show Modal</button> <modal v-if="displayModal" @close="displayModal = false"> <h3 slot="title">My awesome title</h3> <div slot="body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </modal> </div>
// Component registration Vue.component('modal', { template: '#modal-template' }) // App new Vue({ el: "#app", data () { return { displayModal: false } } })
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); body { background: #20262E; padding: 20px; font-family: 'Open Sans', sans-serif; } #app { display: flex; align-items: center; justify-content: center; padding: 20px; height: 82vh; } /* Modal styles */ .m-modal-overlay { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.25); transition: opacity .3s ease; } // You can change the width and height based on your needs .m-modal-wrapper { display: flex; flex-direction: column; width: 400px; height: 400px; border: 1px solid #f2f2f2; background-color: white; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12); transition: all .3s ease; } .m-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #f2f2f2; /* This is just an example, you can target different elements if you want to */ h3 { color: #6f7279; line-height: 1.4; font-size: 16px; font-weight: 600; margin: 0; } } .m-modal-close { color: #c8ccd1; text-transform: uppercase; text-decoration: none; /* This is because I'm using FontAwesome */ i { color: inherit; font-size: 20px; } } .m-modal-body { flex: 1; font-size: 14px; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; /* This is just an example, you can target different elements if you want to */ p { margin: 0; } } /* Vue transition styles */ .modal-enter, .modal-leave-active { opacity: 0; } .modal-enter .m-modal-wrapper, .modal-leave-active .m-modal-wrapper { transform: scale(1.1); }