SHARE
TWEET

Untitled

a guest Apr 18th, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <a @click="$root.$emit('toggle:lastChanceModalTimer')">
  2. Toggle Modal
  3. </a>
  4. <modal
  5.     ref="lastChanceModalTimer"
  6.     class="lastChance-modal"
  7.     event="toggle:lastChanceModalTimer"
  8.     :show="!true"
  9.     :mask-opacity="0.7">
  10.     <template slot="header">
  11.     </template>
  12.     <template slot="body">
  13.     </template>
  14.     <template slot="footer">
  15.     </template>
  16. </modal>
  17.  
  18.  
  19. <script>
  20.     export default {
  21.         name: 'v-modal',
  22.         props: {
  23.             show: {
  24.                 type: Boolean,
  25.                 required: false,
  26.                 default: false,
  27.             },
  28.             event: {
  29.                 type: String,
  30.                 required: false,
  31.                 default: 'toggle:modal',
  32.             },
  33.             fullscreen: {
  34.                 type: Boolean,
  35.                 required: false,
  36.                 default: false,
  37.             },
  38.             maskOpacity: {
  39.                 type: Number,
  40.                 required: false,
  41.                 default: 0.2,
  42.             },
  43.         },
  44.         data() {
  45.             return {
  46.                 zoom: false,
  47.                 showModal: (this.show ? this.show : false),
  48.                 toggleEvent: (this.event ? this.event : 'toggle:modal')
  49.             }
  50.         },
  51.         computed: {
  52.             maskStyles() {
  53.                 return {
  54.                     background: `rgba(0, 0, 0, ${this.maskOpacity})`
  55.                 }
  56.             }
  57.         },
  58.         methods: {
  59.             noscroll() {
  60.                 window.scrollTo(0, 0);
  61.             },
  62.             toggle() {
  63.                 this.showModal = !this.showModal
  64.                 if (this.showModal) {
  65.                     window.addEventListener('scroll', this.noscroll);
  66.                     document.body.style.overflowY = 'hidden'
  67.                 } else {
  68.                     window.removeEventListener('scroll', this.noscroll);
  69.                     document.body.style.overflowY = 'auto'
  70.                 }
  71.             }
  72.         },
  73.         created() {
  74.             this.$root.$on(this.toggleEvent, this.toggle)
  75.             this.zoom = (this.fullscreen ? this.fullscreen : false)
  76.         },
  77.         beforeDestroy() {
  78.             this.$root.$off(this.toggleEvent, this.toggle)
  79.         }
  80.     }
  81. </script>
  82. <template>
  83.     <transition name="v-modal">
  84.         <div class="v-modal-mask" v-if="showModal" @click="toggle" :style="maskStyles">
  85.             <div class="v-modal-wrapper">
  86.                 <div class="v-modal-container" @click.stop="" :class="{'fullscreen':zoom}">
  87.                     <div class="v-modal-header">
  88.                         <a @click="toggle" class="pull-right v-modal-close">
  89.                             <span class="glyphicon glyphicon-remove"></span>
  90.                         </a>
  91.                         <slot name="header"></slot>
  92.                         <div style="clear:both;"></div>
  93.                     </div>
  94.                     <div class="v-modal-body">
  95.                         <slot name="body"></slot>
  96.                     </div>
  97.                     <div class="v-modal-footer">
  98.                         <slot name="footer"></slot>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  103.     </transition>
  104. </template>
  105. <style lang="sass" scoped>
  106.     .v-modal-mask
  107.         position: fixed
  108.         z-index: 9998
  109.         top: 0
  110.         left: 0
  111.         right: 0
  112.         bottom: 0
  113.         width: 100vw
  114.         height: 100vh
  115.         display: table
  116.         transition: opacity .3s ease
  117.         cursor: pointer
  118.  
  119.     .v-modal-wrapper
  120.         display: table-cell
  121.         vertical-align: middle
  122.         text-align: center
  123.  
  124.     .v-modal-container
  125.         cursor: default
  126.         text-align: left
  127.         min-width: 300px
  128.         width: 100%
  129.         max-width: 600px
  130.         margin: 0 auto
  131.         padding: 20px
  132.         background-color: #fff
  133.         color: #444
  134.         border-radius: 2px
  135.         box-shadow: 0 2px 15px rgba(0, 0, 0, .33)
  136.         transition: all 160ms ease-in-out
  137.         font-family: Helvetica, Arial, sans-serif
  138.         display: inline-block
  139.  
  140.     .v-modal-close
  141.         color: #666
  142.         cursor: pointer
  143.  
  144.     .v-modal-container.fullscreen
  145.         top: 0
  146.         left: 0
  147.         right: 0
  148.         bottom: 0
  149.         width: 100vw !important
  150.         height: 100vh !important
  151.         transition: all 300ms ease-in-out
  152.  
  153.     .v-modal-enter
  154.         opacity: 0
  155.  
  156.     .v-modal-leave-active
  157.         opacity: 0
  158.  
  159.     .v-modal-enter .v-modal-container
  160.         transform: scale(0)
  161.  
  162.     .v-modal-leave-active .v-modal-container
  163.         transform: scale(0)
  164. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top