Advertisement
Guest User

Untitled

a guest
Apr 18th, 2019
107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.26 KB | None | 0 0
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement