https://saddleback.com/scripts/VueComponents/PopupModal.js?v=517cdeafa93af7720f65d0a6f449ca34186eeedc

1export default {
2    name: 'PopupModal',
3    props: {
4        isOpen: {
5            type: Boolean,
6            required: true,
7        },
8        uniqueId: {
9            type: String,
10            required: true,
11        }
12    },
13    emits: [
14        'onClose',
15        'onOpen',
16    ],
17    methods: {
18        openPopup() {
19            $.magnificPopup.open({
20                items: {
21                    src: $('#' + this.uniqueId),
22                    type: 'inline'
23                },
24                closeMarkup: '<button class="mfp-close"></button>',
25                callbacks: {
26                    beforeOpen: () => {
27                        this.$emit('onOpen');
28                    },
29                    beforeClose: () => {
30                        this.$emit('onClose');
31                    },
32                },
33            });
34        },
35        closePopup() {
36            $.magnificPopup.close();
37        },
38    },
39    watch: {
40        isOpen(newVal) {
41            if (newVal) {
42                this.openPopup();
43            } else {
44                this.closePopup();
45            }
46        }
47    },
48    mounted() {
49        if (this.isOpen) {
50            this.openPopup();
51        }
52    },
53    template: `
54        <div :id="uniqueId" class="mfp-hide popup" style="max-height: none;">
55            <div class="info-card-v2">
56                <div class="info-card-v2-inner">
57                    <slot></slot>
58                </div>
59            </div>
60        </div>
61    `,
62}