Отображение переменной прокрутки при закрытии одного модального окна и отображении нового модального окна

Question

У меня есть приложение vue, в котором есть Bootstrap modal s. На сайте также есть модальное окно «Неактивность», которое отображается через X минут (в любом случае для тестирования оно установлено на 5 секунд). У меня проблема в следующем сценарии:

• существующий модальный отображается
• существующие модальные закрываются и отображается модальное бездействие

Проблема в том, что если на задней странице отображается вертикальный scroll, то мое неактивное modal отображает его. modal перед этим в порядке, он не отображает его должным образом.

Я использовал console, и похоже, что класс modal-open не добавляется на страницу, но также много другие styles вроде padding не добавляются, как при отображении исходного модального окна.

Я не могу понять, как заставить его работать правильно, поскольку я пытался использовать modal('show').on('show.bs.modal') и .modal('show').on('shown.bs.modal').

Код другого модального компонента

created() {
    VueEvent.$on('show-addedit-address-modal', ( details ) => {
        this.passedDetails = details;

        VueEvent.$emit('pass-modal-details-to-inactivity-modal', { modalName: 'addEditAddressModal', details: this.passedDetails });
    });
}

В модальном компоненте активности

<template>
    <div class="modal fade danger-modal" id="inactivityModal" tabindex="-1" role="dialog" aria-labelledby="inactivityModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content danger-modal-content">
                <div class="modal-body text-center">
                    <h5 class="mb-3">Due to inactivity on the site, you will be logged out in:</h5>
                    <h5 class="mb-1">{{ logoutCountDown }} seconds</h5>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { InactivityMixin } from '../../mixins/InactivityMixin';

export default {
    name: "InactivityModal",

    mixins: [ InactivityMixin ],

    beforeCreate() {
        VueEvent.$on('show-inactivity-modal', () => {
            if (this.prevOpenedModal.modalName !== 'loader' || this.prevOpenedModal.length === 0) {
                $('.modal-backdrop, #adminAccountSelectModal, #addEditAddressModal, #deleteAddressModal, #authorizeOrderModal, #cancelOrderModal, #confirmDeleteModal, #detailsNotSavedModal, #errorModal, #orderSuccessModal, #cancelPreOrderModal').modal('hide');
            
                $('#inactivityModal').modal('show');
            }
        });
    },

    methods: {
        loggingOut() {
            console.log('Logging Out');
        }
    }
}
</script>

Код модальной смеси в неактивном состоянии

export const InactivityMixin = {
    data() {
        return {
            events: ['click', 'mousemove', 'mousedown', 'keypress', 'scroll', 'load'],
            warningTimer: 0,
            logoutCountDown: 0,
            unwatched: false,
            prevOpenedModal: []
        }
    },

    mounted() {
        this.events.forEach((event) => {
            window.addEventListener(event, this.resetTimer)
        })
        
        VueEvent.$on('pass-modal-details-to-inactivity-modal', (data) => {
            this.prevOpenedModal = data;
        });

        this.setTimers();
    },

    destroyed() {
        this.events.forEach((event) => {
            window.removeEventListener(event, this.resetTimer)
        });

        this.resetTimer();
    },

    methods: {
        setTimers() {
            $('#inactivityModal').modal('hide').on('hidden.bs.modal', this.displayPrevModal);

            // Comment out below as only used for TESTING of the inactivity modal
            this.warningTimer = setTimeout(this.warningMsg, 5000);

            //this.warningTimer = setTimeout(this.warningMsg, 600000);
        },

        displayPrevModal() {
            if (this.prevOpenedModal.modalName === 'adminAccModal') {
                VueEvent.$emit('show-admin-account-select-modal');
            } else if (this.prevOpenedModal.modalName === 'addEditAddressModal') {
                VueEvent.$emit('show-addedit-address-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'deleteAddressModal') {
                VueEvent.$emit('show-delete-address-modal');
            } else if (this.prevOpenedModal.modalName === 'authorizeOrderModal') {
                VueEvent.$emit('show-authorize-order-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'cancelOrderModal') {
                VueEvent.$emit('show-cancel-order-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'confirmDeleteModal') {
                VueEvent.$emit('show-confirm-delete-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'launchDetailsNotSavedModal') {
                VueEvent.$emit('show-details-not-saved-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'errorModal') {
                VueEvent.$emit('show-error-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'orderSuccessModal') {
                VueEvent.$emit('show-order-success-modal', this.prevOpenedModal.details);
            } else if (this.prevOpenedModal.modalName === 'CancelPreOrderModal') {
                VueEvent.$emit('show-cancel-pre-order-modal', this.prevOpenedModal.details);
            }
        },

        warningMsg() {
            this.unwatched = false;
            VueEvent.$emit('show-inactivity-modal');
            this.logoutCountDown = 60;
        },

        resetTimer(e) {
            this.unwatched = true;
            clearTimeout(this.warningTimer);
            this.setTimers();
        }
    },

    watch: {
        logoutCountDown(value) {
            if (value > 0 && !this.unwatched) {
                setTimeout(() => {
                    this.logoutCountDown--;
                }, 1000);
            } else if (this.unwatched) {
            } else {
                this.loggingOut();
            }
        }
    }
}

Нормальный модальный Inactivity modal Режим бездействия

Я попытался добавить следующее к коду компонента «Inact Modal»

beforeCreate() {
        VueEvent.$on('show-inactivity-modal', () => {
            if (this.prevOpenedModal.modalName !== 'loader' || this.prevOpenedModal.length === 0) {                
                $('#inactivityModal').modal('show').on('shown.bs.modal', this.applyClass);
            }
        });
    },

    methods: {    
        applyClass() {
            $(document.body).addClass('modal-open');
        }
    }

Но по какой-то причине это не срабатывает при первом запуске модального окна Inct отображается только во второй раз, и когда это происходит, он быстро отображает полосу прокрутки, а затем скрывает ее, а не скрывает перед рендерингом.

Я думал, что использовать shown.bs.modal и hiddenn.bs.modal должно было быть достаточно, так как это должно срабатывает, когда modal завершает рендеринг / скрытие