/home/henzagold/site/components/ Current File: //home/henzagold/site/components/acceptModal.vue
<template>
   <!-- Quick View Modal Start -->
  <div class="modal quick-view-modal" :class="(value)?'fade-in show':'fade'"
       :style="{display:(value)?'block':'none'}">

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

    <div class="modal-dialog modal-m modal-dialog-centered" id="QCModal">
      <div class="modal-content">
        <div class="modal-body">
          <div class="container-fluid">
            <slot name='content'></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Quick View Modal End -->
</template>

<script>
export default {
  name: "Modal",
  props:{
    value:{
      type:Boolean
    }
  },
  methods:{
    close(){
      this.$emit('input', false);
    }
  },
  watch:
    {
      value(newValue){
        const body = document.body
        body.classList.toggle("modal-open")
        if(body.classList.contains("modal-open")){
          body.style.paddingRight= "17px"
        }
        else{
          body.style.paddingRight= null
        }
      },
    },
}
</script>

<style scoped>
  @media (min-width: 576px) {
    .modal-m {
      max-width: 400px;
    }
  }
  #QCModal{
    z-index: 20001;
  }
</style>