Модальный диалог, появляющийся позади модального фона

Я пытаюсь создать модальное диалоговое окно, которое открывается при нажатии кнопки. Однако, когда я делаю это, открывается модальное диалоговое окно с модальным фоном, и экран становится серым и не щелкающим. Это также приводит к тому, что диалог находится под заголовком сайта.

введите описание изображения здесь

В настоящее время я использую Laravel Spark Framework, однако я считаю, что это должно быть универсальным для всех. Это мой HTML.

<spark-tokens :tokens="tokens" :available-abilities="availableAbilities" inline-template>
    <div>
        <div>
            ...
            <button class="btn btn-danger-outline" @click="approveTokenDelete(token)">
                <i class="fa fa-times"></i>
             </button>
            ...
        </div>
        ...
        <!-- Delete Token Modal -->
        <div class="modal fade" id="modal-delete-token" tabindex="-1" role="dialog">
            <div class="modal-dialog" v-if="deletingToken">
                <div class="modal-content">
                    ...
                </div>
            </div>
        </div>
    </div>
</spark-tokens>

Это тот JS, который я использую, чтобы открыть модал.

module.exports = {
    ...
    methods: {
        ...
        /**
         * Get user confirmation that the token should be deleted.
         */
        approveTokenDelete(token) {
            this.deletingToken = token;

            $('#modal-delete-token').modal('show');
        },
        ...
    }
};

Я видел проблемы, подобные этой задаче, но ни одно из решений не помогло мне. Я попытался переместить div "modal fade" за пределы его охватывающего div (так прямо в отношении тега). Это привело к тому, что диалог вообще не отображался. Я попытался изменить z-индекс модального фона, однако я не могу найти правильный файл, чтобы изменить это. Есть ли другое решение этой проблемы? Будем весьма благодарны за любую помощь, которую вы можете оказать. Спасибо!

0 ответов

Другие вопросы по тегам