Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <a @click="$root.$emit('toggle:lastChanceModalTimer')">
- Toggle Modal
- </a>
- <modal
- ref="lastChanceModalTimer"
- class="lastChance-modal"
- event="toggle:lastChanceModalTimer"
- :show="!true"
- :mask-opacity="0.7">
- <template slot="header">
- </template>
- <template slot="body">
- </template>
- <template slot="footer">
- </template>
- </modal>
- <script>
- export default {
- name: 'v-modal',
- props: {
- show: {
- type: Boolean,
- required: false,
- default: false,
- },
- event: {
- type: String,
- required: false,
- default: 'toggle:modal',
- },
- fullscreen: {
- type: Boolean,
- required: false,
- default: false,
- },
- maskOpacity: {
- type: Number,
- required: false,
- default: 0.2,
- },
- },
- data() {
- return {
- zoom: false,
- showModal: (this.show ? this.show : false),
- toggleEvent: (this.event ? this.event : 'toggle:modal')
- }
- },
- computed: {
- maskStyles() {
- return {
- background: `rgba(0, 0, 0, ${this.maskOpacity})`
- }
- }
- },
- methods: {
- noscroll() {
- window.scrollTo(0, 0);
- },
- toggle() {
- this.showModal = !this.showModal
- if (this.showModal) {
- window.addEventListener('scroll', this.noscroll);
- document.body.style.overflowY = 'hidden'
- } else {
- window.removeEventListener('scroll', this.noscroll);
- document.body.style.overflowY = 'auto'
- }
- }
- },
- created() {
- this.$root.$on(this.toggleEvent, this.toggle)
- this.zoom = (this.fullscreen ? this.fullscreen : false)
- },
- beforeDestroy() {
- this.$root.$off(this.toggleEvent, this.toggle)
- }
- }
- </script>
- <template>
- <transition name="v-modal">
- <div class="v-modal-mask" v-if="showModal" @click="toggle" :style="maskStyles">
- <div class="v-modal-wrapper">
- <div class="v-modal-container" @click.stop="" :class="{'fullscreen':zoom}">
- <div class="v-modal-header">
- <a @click="toggle" class="pull-right v-modal-close">
- <span class="glyphicon glyphicon-remove"></span>
- </a>
- <slot name="header"></slot>
- <div style="clear:both;"></div>
- </div>
- <div class="v-modal-body">
- <slot name="body"></slot>
- </div>
- <div class="v-modal-footer">
- <slot name="footer"></slot>
- </div>
- </div>
- </div>
- </div>
- </transition>
- </template>
- <style lang="sass" scoped>
- .v-modal-mask
- position: fixed
- z-index: 9998
- top: 0
- left: 0
- right: 0
- bottom: 0
- width: 100vw
- height: 100vh
- display: table
- transition: opacity .3s ease
- cursor: pointer
- .v-modal-wrapper
- display: table-cell
- vertical-align: middle
- text-align: center
- .v-modal-container
- cursor: default
- text-align: left
- min-width: 300px
- width: 100%
- max-width: 600px
- margin: 0 auto
- padding: 20px
- background-color: #fff
- color: #444
- border-radius: 2px
- box-shadow: 0 2px 15px rgba(0, 0, 0, .33)
- transition: all 160ms ease-in-out
- font-family: Helvetica, Arial, sans-serif
- display: inline-block
- .v-modal-close
- color: #666
- cursor: pointer
- .v-modal-container.fullscreen
- top: 0
- left: 0
- right: 0
- bottom: 0
- width: 100vw !important
- height: 100vh !important
- transition: all 300ms ease-in-out
- .v-modal-enter
- opacity: 0
- .v-modal-leave-active
- opacity: 0
- .v-modal-enter .v-modal-container
- transform: scale(0)
- .v-modal-leave-active .v-modal-container
- transform: scale(0)
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement