Deseo que el modal le pregunte al usuario antes de cargar la imagen, ¿cómo puedo evitar que la entrada se active al mismo tiempo que mi modal y, en cambio, que la entrada se active al cerrar mi modal mostrado?
const modal = document.querySelector('.modal'); const openModal = document.querySelector('.open-button'); const closeModal = document.querySelector('.close-button'); openModal.addEventListener('click', () => { modal.showModal(); }) closeModal.addEventListener('click', () => { modal.close(); }) <input class="open-button" type="file" accept="image/png, image/jpeg" > <button>Send</button> </form> </div> </div> </div> </div> <dialog class="modal" id="modal"> <h2>Hello</h2> <p>This is a modal</p> <button class="button close-button">Proceed</button> </dialog> <footer> const modal = document.querySelector('.modal'); const openModal = document.querySelector('.open-button'); const closeModal = document.querySelector('.close-button'); closeModal.addEventListener('click', () => { modal.close(); document.getElementById("input-browseFile").click(); }) function onclick_browseFile() { modal.showModal() } <button onclick="onclick_browseFile()">Browse</button> <input id="input-browseFile" class="open-button" type="file" accept="image/png, image/jpeg" hidden> <button>Send</button> </form> </div> </div> </div> </div> <dialog class="modal" id="modal"> <h2>Hello</h2> <p>This is a modal</p> <button class="button close-button">Proceed</button> </dialog> <footer>