Event Listeners no funcionan, ¿por qué?

Tengo problemas con mi código: el código html es de un formulario, pero el botón es lo único visible, y el formulario aparece al darle click al botón, pero al darle click nunca sale y no pasa nada.
Alguien puede ayudarme por favor…

        <button class="signUp btn">Contactanos</button>

        <div class="form-modal">
            <div class="content-wrapper">
                <div class="close"> + </div>
                <img src="img/profile.jpg" alt="">
                <form action="enviar.php" method="POST">
                    <input type="text" name="nombre" placeholder="Nombre">
                    <input type="email" name="email" placeholder="Correo">
                    <input type="text" name="telefono" placeholder="Telefono">
                    <textarea name="mensaje" id="mensaje" placeholder="mensaje"></textarea>
                    <button class="submit btn">Enviar</button>
                </form>
            </div>
        </div>
    </div>

Y estos son los scripts que no me funcionan

const singUp = document.querySelector(".signUp");
const modal = document.querySelector(".form-modal");
const close = document.querySelector(".close");

singUp.addEventListener("click", ()=>{
    modal.style.display = "flex";
})

close.addEventListener("click", ()=>{
    modal.style.display = "none";
})