https://saddleback.com/scripts/ServingOpps/ServePopup.js?v=b2d0741167059c5ea156aba9420b4bee89d6778d

1import Modal from '/scripts/Modals/BasicModalMixin.js';
2
3export default {
4    name: 'ServePopup',
5
6    components: {
7        Modal
8    },
9
10    props: ['visible', 'imageUrl', 'buttonText', 'content'],
11
12    emits: ['close', 'explore'],
13
14    template: `
15    <Modal
16        v-show="visible"
17        v-on:close="$emit('close')"
18        class="serve-modal"
19    >
20        <template v-slot:header>
21            <img v-if="imageUrl" :src="imageUrl" alt="" />
22        </template>
23
24        <template v-slot:body>
25            <div v-html="content"></div>
26        </template>
27
28        <template v-slot:footer v-if="buttonText">
29            <div class="action-btns">
30                <button class="btn" v-on:click="$emit('explore')">{{ buttonText }}</button>
31            </div>
32        </template>
33    </Modal>
34    `,
35
36    methods: {
37        addModalOpenClass() {
38            document.body.classList.add('modal-open');
39        },
40
41        removeModalOpenClass() {
42            document.body.classList.remove('modal-open');
43        }
44    },
45
46    watch: {
47        visible(newVal) {
48            if (newVal) {
49                this.addModalOpenClass();
50            } else {
51                this.removeModalOpenClass();
52            }
53        }
54    },
55
56    beforeUnmount() {
57        this.removeModalOpenClass();
58    },
59};