Tengo este marcado html. Hago un botón con la clase "ventana abierta", abre una ventana emergente. Esta ventana se puede cerrar presionando el botón con la clase "cerrar ventana", y cuando se desplaza sobre este botón, el fondo cambia con el tiempo. Después de hacer clic en este botón, la ventana se vuelve invisible, pero el botón sigue visible durante 0,4 s (es la transición).

¿Cómo ocultar este botón instantáneamente después de hacer clic y no eliminar su cambio de fondo?

 <h3>Block title</h3> <p> Block text.Block text.Block text.Block text.Block text.Block text. </p> <button class="open-window">Learn more</button> <div class="window hidden"> <button class="close-window"> <span>×</span> </button> <h3>Block2 title</h3> <p> Block2 text.Block2 text.Block2 text.Block2 text.Block2 text. </p> <a href="" class="window-button"> <button>Go to somewhere</button> </a> </div> </div> <style> .hidden{ visibility: hidden; } .window{ display: flex; flex-direction: column; height: 250px; background: lightgray; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 20px; padding: 10px; } .close-window { position: fixed; background: green; right: 20px; top: 20px; width: 30px; height: 30px; border: black solid; border-radius: 50%; } .close-window:hover{ background: blue; transition: 0.4s; } </style> <script> let openButtons = document.getElementsByClassName('open-window'); let closeButtons = document.getElementsByClassName('close-window'); for (let i = 0; i < openButtons.length; i++) { openButtons[i].addEventListener('click', ()=>{ openButtons[i].nextElementSibling.classList.toggle("hidden"); }) } for (let i = 0; i < closeButtons.length; i++) { closeButtons[i].addEventListener('click', ()=>{ closeButtons[i].parentElement.classList.add("hidden"); }) } </script>

No estoy seguro de usar la visibilidad aquí, pero no sé por qué mostrar: ninguno no funciona aquí. Si configuro display:none para la clase "oculto", una ventana emergente es visible después de que se carga una página y no se puede cerrar.