OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Javascript modal box appears permanently on page but my other two modals dont

  • Thread starter Thread starter Connor Davis
  • Start date Start date
C

Connor Davis

Guest
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.

Code:
<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>

Code:
// 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);
        });
    });
});

Code:
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%);
}

<p>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</p>
<p>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.</p>
<pre><code><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>
</code></pre>
<pre><code>// 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);
});
});
});
</code></pre>
<pre><code>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%);
}
</code></pre>
 
Top