I have 3 modal boxes that open upon clicking the learn more buttons. the issue is the 3rd one is open on page load and is unable to close using the “X”. It worked perfectly before I centred the modal boxes as they were displaying in the top left

So dialog-3 is the current issue but I cant seem to figure out why only this modal is displaying permanently. The other two work perfectly they open and close in the centre of the screen but the 3rd modal is always on the screen no matter what. I checked to see my script was loading correctly and console.log to see the button working and showing the button is being clicked.

<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">
                <div class="article-container">
                    <img src="assets/email-client.png" alt="Projects 1" class="project-img">
                </div>
                <h2 class="experience-sub-title project-title">Project One</h2>
                <div class="btn-container">
                    <button class="btn btn-color-2 project-btn" onclick="location.href='https://github.com/iO-Academy/2024-mar-sde-email-client-woolly-mammoths'">GitHub</button>
                    <button class="btn btn-color-2 project-btn" onclick="location.href='https://github.com'">Live Demo</button>
                    <button class="btn btn-color-2 project-btn primary" data-dialog="dialog-1">Learn More</button>

                    <dialog id="dialog-1">
                        <h2>Email Client Project</h2>
                        <p>A backend focused project building an email client to show emails in an overview pulling from a fetch request to an API.</p>
                        <p>Please view the live demo.</p>
                        <button onclick="document.getElementById('dialog-1').close();" aria-label="close" class="x">❌</button>
                    </dialog>
                </div>
            </div>
            <div class="details-container color-container">
                <div class="article-container">
                    <img src="assets/furniture-store.png" alt="Projects 2" class="project-img">
                </div>
                <h2 class="experience-sub-title project-title">Project Two</h2>
                <div class="btn-container">
                    <button class="btn btn-color-2 project-btn" onclick="location.href='https://github.com'">GitHub</button>
                    <button class="btn btn-color-2 project-btn" onclick="location.href='https://github.com'">Live Demo</button>
                    <button class="btn btn-color-2 project-btn primary" data-dialog="dialog-2">Learn More</button>

                    <dialog id="dialog-2">
                        <h2>Furniture Store Database Project</h2>
                        <p>A backend focused project handling and building safe and secure databases using queries to sort by ID or various other sorting methods.</p>
                        <p>Please view the live demo.</p>
                        <button onclick="document.getElementById('dialog-2').close();" aria-label="close" class="x">❌</button>
                    </dialog>
                </div>
            </div>
            <div class="details-container color-container">
                <div class="article-container">
                    <img src="assets/annual-price-toggle.png" alt="Projects 3" class="project-img">
                </div>
                <h2 class="experience-sub-title project-title">Project Three</h2>
                <div class="btn-container">
                    <button class="btn btn-color-2 project-btn" onclick="location.href='https://github.com'">GitHub</button>
                    <button class="btn btn-color-2 project-btn" onclick="location.href='https://github.com'">Live Demo</button>
                    <button class="btn btn-color-2 project-btn primary" data-dialog="dialog-3">Learn More</button>

                    <dialog id="dialog-3">
                        <h2>Annual Price Toggle Project</h2>
                        <p>A frontend project focused on creating an annual price toggle feature for a subscription-based service.</p>
                        <p>Please view the live demo.</p>
                        <button onclick="document.getElementById('dialog-3').close();" aria-label="close" class="x">❌</button>
                    </dialog>
                </div>
            </div>
        </div>
    </div>
    <img src="assets/arrow.png" alt="Arrow Icon" class="icon arrow" onclick="location.href='#contact'" />
</section>

// Close all open dialogs
function closeDialogs() {
    const dialogs = document.querySelectorAll('dialog');
    dialogs.forEach(dialog => dialog.close());
}

// Open a specific dialog
function openDialog(id) {
    closeDialogs(); // Ensure all dialogs are closed first
    document.getElementById(id).showModal();
}

// Close a specific dialog
function closeDialog(id) {
    document.getElementById(id).close();
}

// Event listeners for project buttons
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.project-btn.primary').forEach(button => {
        button.addEventListener('click', (event) => {
            const dialogId = event.target.getAttribute('data-dialog');
            openDialog(dialogId);
        });
    });

    document.querySelectorAll('.x').forEach(button => {
        button.addEventListener('click', (event) => {
            const dialog = event.target.closest('dialog');
            closeDialog(dialog.id);
        });
    });
});

dialog {
    padding: 1rem 3rem;
    background: white;
    max-width: 400px;
    padding-top: 2rem;
    border-radius: 20px;
    border: 0;
    box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
    animation: fadeIn 1s ease both;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}