模态对话框出现在模态背景后面

Question

我正在尝试创建一个模态对话框，该对话框在单击按钮时打开。但是，当我执行此操作时，模态对话框打开即为模态背景，并且屏幕变为灰色且不可单击。这也导致对话框位于网站标题的下方。

我目前正在使用Laravel Spark框架，但是我认为这应该对所有人都通用。 这是我的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移到它所包含的div之外（标记附近）。这导致对话框根本不显示。我试图更改模式背景的z索引，但是，我找不到正确的文件来更改此名称。是否有其他解决方案可以解决此问题？大家能提供的任何帮助将不胜感激。谢谢！