/home/henzagold/oldsite/components/ Current File: //home/henzagold/oldsite/components/fModal.vue
<template>
  <div :style="{display}" class="modal quick-view-modal" :class="m?'fade-in show':'fade'" role="dialog">

    <div class="vs-sidebar--background" @click="toggle(false)"></div>

    <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="height: 80vh;max-height: 80vh;display: flex;align-items: center;justify-content: center;" :style="{maxWidth}">
      <div class="modal-content h-full" style=";z-index: 20001">
        <div class="modal-body h-full">
          <div v-if="closable" class="close-btn close-dark" @click="toggle(false)">
            <span></span>
            <span></span>
          </div>
          <h3 class="related-title text-center hp1" style="padding: 8px;margin-bottom: 0;text-align: center">
            <slot name="header"></slot>
          </h3>
          <slot name="body" style="color: #000"></slot>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props:{
    maxWidth:{
      required: false,
      type: String
    },
    closable:{
      required: false,
      type: Boolean,
      default: true
    },
    model:{
      type:Boolean,
      default:false
    }
  },
  model: {
    prop: 'model',
    event: 'change'
  },
  data(){
    return{
      display: "none"
    }
  },
  watch:{
    model(value){
      this.display = (this.model)?"block":"none"
      const html = document.getElementsByTagName('html')
      if (html) html[0].classList.toggle('overflow-hidden')
      if (!value){
        this.$emit('close')
      }
    }
  },
  computed: {
    m: {
      get: function() {
        return this.model
      },
      set: function(value) {

        this.$emit('change', value)
      }
    }
  },
  methods:{
    toggle(value){
      this.$emit('change', value)
      // console.log(value)
    }
  }
}
</script>

<style>
</style>