模态框居中后第三个模态框加载即显示且无法关闭的问题求助

各位大佬好，我遇到个头疼的问题想请教下：我做了三个模态框，原本点击每个项目的“了解更多”按钮就能正常打开对应的模态框，一切都好好的。但自从我把模态框改成居中显示之后，第三个模态框（dialog-3）就出问题了——它在页面一加载就自动显示出来，而且点右上角的“X”完全关不掉！

另外两个模态框现在都正常得很，能正常触发打开、点击关闭也没问题，而且都能乖乖居中显示。唯独这个dialog-3，就一直固定在页面上，怎么都弄不走。

我已经排查过这些点：

• 确认脚本加载没有问题，控制台没报错
• 用console.log测试了关闭按钮的点击事件，能看到按钮确实被触发了，但模态框就是没反应

下面是我项目部分的HTML代码（原代码较长做了截断，核心结构如下）：

<section id="projects">
    <p class="section__text__p1">Browse my Recent</p>
    <h1 class="title">Projects</h1>
    <div class="experience-details-container">
        <div class="about-containers">
            <div class="details-container color-container">
                <!-- 第一个项目卡片，包含触发dialog-1的按钮 -->
            </div>
            <div class="details-container color-container">
                <!-- 第二个项目卡片，包含触发dialog-2的按钮 -->
            </div>
            <div class="details-container color-container">
                <!-- 第三个项目卡片，包含触发dialog-3的按钮 -->
            </div>
        </div>
    </div>

    <!-- 三个模态框的容器，其中dialog-3是问题模态框 -->
    <div id="dialog-1" class="modal">
        <!-- 模态框内容 + 关闭按钮 -->
    </div>
    <div id="dialog-2" class="modal">
        <!-- 模态框内容 + 关闭按钮 -->
    </div>
    <div id="dialog-3" class="modal">
        <!-- 模态框内容 + 关闭按钮 -->
    </div>

有没有大佬能帮我分析下，是不是我给模态框加的居中CSS影响了它的显示状态或者关闭逻辑？或者还有什么我没注意到的细节？感激不尽！

备注：内容来源于stack exchange，提问作者Connor Davis