tengo un problema con un botón y lo que pasa es que cuando toco el botón de "Contáctanos" funciona todo bien hasta que lo cierro o lo envio, el problema pasa cuando quiero abrirlo de nuevo una vez hecho esto y no me deja, lo que lo hace un botón de un único uso, cosa que no quiero. Aquí está el dialog en HTML:
<button class="button open-button hero-btn">Contáctanos</button>
<dialog class="container modal" id="modal">
<form class="form" method="post" action="https://formsubmit.co/aebbad3500545f6a1b453acc0a5c33bf">
<button class="closeForm"><i class="fa-solid fa-xmark"></i></button>
<h2>Envianos un email</h2>
<input type="text" name="Nombre" id="name" placeholder="Tu nombre y apellido" required>
<input type="email" name="email" id="email" placeholder="Tu email" required>
<input type="text" name="Teléfono" id="phone" placeholder="Número de teléfono" >
<textarea name="Consulta" id="message" rows="4" placeholder="Como te podemos ayudar?" required></textarea>
<input type="submit" class="send" value="Enviar"/>
</form>
</dialog>
Y aquí el js el modal:
const modal= document.querySelector('dialog');
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".closeForm");
const sendModal = document.querySelector(".send");
modal.style.display = 'none';
openModal.addEventListener("click", () => {
modal.showModal();
modal.style.display = 'flex';
});
closeModal.addEventListener("click", () => {
modal.style.display = 'none';
});
sendModal.addEventListener("click", () => {
modal.style.display = 'none';
});