Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS My modal closes automatically

lmnu

Coder
I don't know why when I click on the Download 1 link and the Download 2 button my modal window closes automatically (Test 2) ???

I want my modal window to close only when I click on close.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test Popup Modal</title>
    <style>
    :root {
        --bg-color: #F5F9FC;
        --grad-color-1: #00d2ff;
        --grad-color-2: #3a47d5;
        --gradient: linear-gradient(90deg, var(--grad-color-1) 0%, var(--grad-color-2) 100%);
        box-sizing: border-box;
    }
    /*--====== Common Styles ======--*/
    .btn {
        background-image: var(--gradient);
        color: #fff;
        font-size: 1rem;
        padding: 0.6rem 1.8rem;
        border-radius: 50px;
        transition: transform 0.2s ease;
        border: none;
    }
    .btn:hover {
        transform: translateY(-2px);
    }
    /*--====== Modal ======--*/
    .modal {
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.3s ease;
    }
    /* when Modal has open class */
    .modal.open {
        pointer-events: all;
        opacity: 1;
        visibility: visible;
    }
    .modal_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem;
        min-height: calc(100% - 3rem);
    }
    .modal_content {
        position: relative;
        background-color: var(--bg-color);
        width: 100vw;
        max-width: 800px;
        padding: 4rem;
        border-radius: 10px;
        text-align: center;
        overflow: hidden;
        transform: scale(0);
        transition: transform 0.5s ease;
    }
    /* when Modal is open then modal-content will... */
    .modal.open .modal_content {
        transform: scale(1);
    }
    .modal_body {
        margin: 2rem 0 3rem;
    }
    .modal_body p {
        font-size: 1.2rem;
        line-height: 1.6;
        letter-spacing: 0.8px;
    }
    .close_btn {
        font-size: 1.2rem;
        margin: 20px 0;
    }
    </style>
</head>
<body>
    <button class="btn nav_btn">Test 1</button>
    <button class="btn nav_btn">Test 2</button>

    <!--====== Modal-01 ======-->
    <div class="modal">
        <div class="modal_wrapper">
            <div class="modal_content">
                <div id="contact" role="dialog" tabindex="-1">
                    <div class="form-infos">
                        <div class="form-infos-container">
                            <h2>Hello 1</h2>
                            <button class="btn nav_btn close_btn">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--====== Modal-02 ======-->
    <div class="modal">
        <div class="modal_wrapper">
            <div class="modal_content">
                <div id="contact" role="dialog" tabindex="-1">
                    <form action="#" method="post">
                        <a href="">Download 1</a>
                        <button class="btn">Download 2</button>
                    </form>
                    <button class="btn nav_btn close_btn">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    const modals = document.querySelectorAll('.modal');
    const nav_btn = document.querySelectorAll('.nav_btn');
    const close_btn = document.querySelectorAll('.close_btn');
    const openModal = (index) => {
        modals[index].classList.add('open');
    };
    const closeModal = (index) => {
        modals[index].classList.remove('open');
    };
    // opening the clicked Modal.
    nav_btn.forEach((currnavbtn, index) => {
        currnavbtn.addEventListener('click', () => {
            openModal(index);
        });
    });
    // closing the current opened Modal.
    close_btn.forEach((currCloseBtn, index) => {
        currCloseBtn.addEventListener('click', (e) => { //add e in the brackets
            e.preventDefault();
            closeModal(index);
        });
    });
    // closing the current opened Modal on clicking outside.
    window.addEventListener('click', (e) => {
        if (e.target.className === 'modal_wrapper') {
            modals.forEach((currModal) => {
                currModal.classList.remove('open');
            });
        }
    });
    </script>
</body>
</html>

Thank you for your help
 
Instead of re-writting your code or sending you to a page with many explainations I will just paste the code you need to do this.
From W3Schools:
Code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <p>Add the w3-card-* class to the w3-modal-content container to display the modal as a card.</p>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal">
        <span onclick="document.getElementById('id01').style.display='none'"
        class="w3-button w3-display-topright">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text..</p>
        <p>Some text..</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>
          
</body>
</html>
 
Hi OldMan,
When I put paragraphs in my modal window I don't have a problem either. The problem is when I put a link or a button.

CSS:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
    <div class="w3-container">
        <h2>W3.CSS Modal</h2>
        <p>Add the w3-card-* class to the w3-modal-content container to display the modal as a card.</p>
        <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open
            Modal</button>
        <div id="id01" class="w3-modal">
            <div class="w3-modal-content w3-card-4">
                <header class="w3-container w3-teal">
                    <span onclick="document.getElementById('id01').style.display='none'"
                        class="w3-button w3-display-topright">&times;</span>
                    <h2>Modal Header</h2>
                </header>
                <div class="w3-container">
                    <form action="#" method="post">
                        <a href="">Download 1</a>
                        <button class="btn">Download 2</button>
                    </form>
                </div>
                <footer class="w3-container w3-teal">
                    <p>Modal Footer</p>
                </footer>
            </div>
        </div>
    </div>
</body>
</html>

Why when I click on the button, the modal window closes ?
 
The problem is that you have put the button inside a <form>. If you don't do that, clicking the button does not close the modal.
Just why submitting a form closes the modal I'm not sure, but it is probably something you don't want to do anyway.
The <a href="">Download 1</a> would close the modal anyway, as it relaunches the entire page ( I think).
 
So it is not possible to make a contact form or a download form with a link in a modal window ?

I spend a lot of time looking for an example on the web and it's not easy to find.

We think simple things are easy to do and we block for several days.

It's possible to do it but you have to use Bootstrap and I don't really want to use it.
 
Last edited:
So it is not possible to make a contact form or a download form with a link in a modal window ?

I spend a lot of time looking for an example on the web and it's not easy to find.

We think simple things are easy to do and we block for several days.

It's possible to do it but you have to use Bootstrap and I don't really want to use it.
Get used to it... nothing is ever simple or easy.
I don't really know if this is possible or not, only that it doesn't work the way you did it. I think the problem is that you are using href and action, both of which will re-run the outer form (I think). Perhaps different values for these tags might help, but your guess is as good as mine.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom