日安，
我目前几乎完成了创建一个模式与香草JS，目前，我的"年龄门"没有检查用户的年龄是否小于18岁，并显示一个错误的"无效凭据"，
我尝试更进一步，尝试在正确的值上关闭模态，然后关闭模态，
请看下面的JS代码：

const modal = document.getElementById("myModal");
const form = document.querySelector('form');
const loading = document.getElementById("loading");
const btnSubmit = document.getElementById('btnSubmit');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

// Functions

function onlyNumbers(e) {
  const ageGate = document.querySelectorAll('.ageGate');
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  const errMsgDiv = document.getElementById('errorMsg');

  let containsNumber = false
  ageGate.forEach(input => {
    if(numbers.some(num => input.value.includes(num))) containsNumber = true;
  })
  if (containsNumber || ageGate.value !== numbers && ageGate.value == '' || ageGate[2].value < 2004) {
    let paragraph = document.createElement('p');
    paragraph.innerHTML = 'Invalid Credentials';
    errMsgDiv.append(paragraph);
    e.preventDefault()
    }  else if (containsNumber = true) {
        btnSubmit.remove()
        loading.classList.remove('hide')
    }
    
};

现在是模态html：

<div id="modal">
            <div class="modal-content">
                <div class="flex-container">
                    <div>
                        <img
                            src="{% static 'imgs/Fireball_logo.png' %}"
                            class="logo"
                            alt="fireball logo"
                        />
                        <h1>WOAH THERE!</h1>
                        <p class="info-text">We just need to see something</p>
                    </div>
                    <form action="">
                        {% csrf_token %}
                        <div class="form-flex">
                            <input
                                class="ageGate"
                                type="text"
                                max-length="2"
                                placeholder="DD"
                            />
                            <input
                                class="ageGate"
                                type="text"
                                max-length="2"
                                placeholder="MM"
                            />
                            <input
                                class="ageGate"
                                type="text"
                                max-length="4"
                                placeholder="YYYY"
                            />
                        </div>
                        <p class="cookie-policy">
                            <small>
                                This site uses cookies. Cookie Policy. I agree
                                to the terms of use, and the privacy policy.
                                This information will not be used for marketing
                                purposes
                            </small>
                        </p>
                        <div class="text-center">
                            <button id="btnSubmit" class="btn" type="submit">
                                <p class="btn-text">Enter</p>
                            </button>
                            <img 
                                src="{% static 'imgs/spinner.gif' %}"
                                alt="spinner" 
                                id="loading" 
                                class="loading close">
                        </div>
                        <span id="errorMsg"></span>
                    </form>
                    <div>
                        <img
                            src="{% static 'imgs/Drinkaware_logo.png' %}"
                            alt="Drinkaware Logo"
                        />
                    </div>
                </div>
            </div>
        </div>

请像往常一样，我是新的排序与这一切，我肯定会尝试，所以在您的帮助下，请我可以要求对您的解决方案进行简要说明，以便我可以看到如何思考作为一个开发人员，因为这种信息确实帮助我
谢谢!