<template> <div class="overlay" @click.self="close" > <div class="modal" v-bind:style="styles" > <slot></slot> </div> </div> </template> <script> export default { name: "", props: { styles: { default: function () { return { width: '500px', height: '350px' } }, type: Object } }, data: () => ({ }), methods: { close () { console.log('click close') this.$emit('close') } } } </script> <style lang="scss" scoped> .overlay{ background-color: rgba(0,0,0,0.8); position:fixed; top:0; right:0; bottom:0; left:0; z-index:99999; } .modal{ background-color:#fff; position:absolute; box-sizing:border; max-width:80vw; max-height:70vh; top:0; right:0; bottom:0; left:0; margin:auto; padding:1em; border-radius:3px; box-shadow:2px 2px; } </style>