Всплывающие окно

[Grek 63]

Не могу понять сделал всплывающие окно, но кнопка "ПОНЯТНО" не работает просто жму и не чего не происходит, как понимаю надо подключить скрипт, но не могу понять как именно подскажите как правильно подключить кусок скрипта. 

Этот кусок отвечает за закрытие окна надо его вставить в другой кусок смотрите ниже

Спойлер

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                user: [],
                activeTab: 'items',
                type: '',
                trade_link: '',
                items: [],
                contracts: [],
                page: 0,
                morePage: false,
                loadingMore: false,
                withdraw_price: 0,
                modalError: {
                    active: false
                },
                modalSuccess: {
                    active: false
                }
            }
        },
        methods: {
            async get() {
                const request = await axios.post('/api/users/get', {id: this.$route.params.id});

                if (request.data.success) {
                    this.type = request.data.type;
                    this.user = request.data.user;
                    this.trade_link = this.user.trade_link;

                    this.loadItems();

                    this.$root.hideLoading();
                } else {
                    this.$router.go(-1);
                }
            },
            async saveLink() {
                const request = await axios.post('/api/users/saveLink', {trade_link: this.trade_link});
                const data = request.data;

                $.wnoty({
                    type: data.type,
                    message: data.message
                });
            },
            async loadItems() {
                this.loadingMore = true;
                const request = await axios.post('/api/users/items', {id: this.$route.params.id, page: this.page += 1});

                const array = this.items;
                Array.prototype.push.apply(array, request.data.items);

                this.items = array;
                this.morePage = request.data.more;
                this.loadingMore = false;
            },
            async loadContracts() {
                this.loadingMore = true;
            },
            async sellItem(id, i) {
                const request = await axios.post('/api/users/sell', {id: id});
                const data = request.data;

                this.$root.getBalance();

                if (data.type === 'success') {
                    if (this.user.allPrice[0].myBet !== null) this.user.allPrice[0].myBet = parseInt(this.user.allPrice[0].myBet) - parseInt(this.items.item.price);
                    this.items.status = 1;
                    this.$forceUpdate();
                }

                $.wnoty({
                    type: data.type,
                    message: data.message
                });
            },
            async buyItem(id, i) {
                const request = await axios.post('/api/users/buy', {id: id});
                const data = request.data;

                if (data.type === 'success') {
                    this.items.status = data.status;
                    this.$forceUpdate();
                }

                if (data.type === 'min') {
                    this.withdraw_price = data.withdraw_price;
                    this.openErrorModal();
                } else if (data.type === 'success') {
                    this.openSuccessModal();
                } else {
                    $.wnoty({
                        type: data.type,
                        message: data.message
                    });
                }
            },
            async loadTab(tab) {
                switch (tab) {
                    case 'items':
                        this.loadItems();
                        this.activeTab = 'items';
                        break;
                    case 'contracts':
                        this.loadContracts();
                        this.activeTab = 'contracts';
                        break;
                }
            },
            async sellAll() {
                $.wnoty({
                    type: 'info',
                    message: 'Продаем предметы'
                });

                const request = await axios.post('/api/users/sellAll');
                const data = request.data;

                if (data.type === 'success') {
                    for (let i in this.items) {
                        this.items.status = 1;
                    }
                    this.$root.getBalance();
                    this.user.allPrice[0].myBet = 0;
                    this.$forceUpdate();
                }

                $.wnoty({
                    type: data.type,
                    message: data.message
                });
            },
            openErrorModal() {
                const vm = this;

                this.modalError.active = true;

                setTimeout(() => {
                    $('body').click(function (event) {
                        if ($(event.target).is('.styles_overlayCenter__YHoO7')) {
                            vm.modalError.active = false;
                        }
                    });

                    $('.modal__close').click(function (event) {
                        vm.modalError.active = false;
                    });
                }, 100);
            },
            openSuccessModal() {
                const vm = this;

                this.modalSuccess.active = true;

                setTimeout(() => {
                    $('body').click(function (event) {
                        if ($(event.target).is('.styles_overlayCenter__YHoO7')) {
                            vm.modalSuccess.active = false;
                        }
                    });

                    $('.modal__close').click(function (event) {
                        vm.modalSuccess.active = false;
                    });
                }, 100);
            }
        },
        mounted() {
            this.$root.showLoading();
            this.get();
        },
        sockets: {
            setItemStatus: function (drop) {
                if (this.$root.user !== null && parseInt(drop.user_id) === parseInt(this.$root.user.id)) {
                    for (let [key, value] in this.items) {
                        if (this.items[key].id === drop.id) {
                            this.items[key].status = drop.status;
                            if (drop.status === 5) this.items[key].trade_id = drop.trade_id;
                            if (drop.status === 6) this.items[key].hover = 'item--hover';
                            this.$forceUpdate();
                        }
                    }
                }
            }
        }
    }
</script>

Вот кусок кода который отвечает за всплывающие окно 

                <div class="styles_overlay__CLSq- styles_overlayCenter__YHoO7">
                    <div class="styles_modal__gNwvD modal">
                        <div class="modal__title">текст</div>
                        <div class="modal-body pb-1 pt-0 text-center py-4"><i
                                class="fad fa-check-circle mb-4 fa-4x" style="color: #48cb64;"></i>
                                    <br>текст<br/>

                                    <span style="color: red;">
                                        Внимание! текст.
                                    </span>
                                    <br><span style="color: green;">
                                        Внимание! текст.
                                    </span><br/>
                            <div class="modal__form-wrapper">
                                <button class="modal__balance-btn" @click="modalSuccess.active = false">Понятно</button>
                            </div>
                        </div>
                        <button class="styles_closeButton__20ID4 modal__close">
                            <svg class="styles_closeIcon__1QwbI" xmlns="http://www.w3.org/2000/svg" width="28" height="28"
                                 viewBox="0 0 36 36">
                                <path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

подскажите какой кусок того скрипта надо вставить в этот кусок что бы кнопки закрыть и "ПОНЯТНО" заработали. За помощь тыкну плюсик

Изменено 17 марта, 2020 пользователем Grek

[Grek 63]

КТО ПОМОЖЕТ СДЕЛАТЬ ЗАПЛАЧУ ПИШИТЕ В ЛС

[L2Chrome 2]

Сам скрипт прописывать в scripts
css не забываем..