materio-d9/web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue

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