This is something I ran into on my own Check out the elitics my check out is in a modem and You are typing in an input box that is focused on an imp on a modal and you hit escape. What should that do should that unfocus the input or should it close the modal? Right I think you I think at first it should unfocus and then it should close themodal But like who wants to have a modal accidentally closed while they're submitting their payment information That's exactly it. So I don't feel and like talking asking on Twitter I was like yeah, like the way you did is probably better than than what they're recommending.
In this Hasty Treat, Scott and Wes talk through the differences between modals, popups, popovers, lightboxes, and dialog boxes.
Show Notes
const showButton = document.getElementById('showDialog'); const favDialog = document.getElementById('favDialog'); const outputBox = document.querySelector('output'); const selectEl = favDialog.querySelector('select'); const confirmBtn = favDialog.querySelector('#confirmBtn'); // "Show the dialog" button opens the modally showButton.addEventListener('click', () => { favDialog.showModal(); }); // "Favorite animal" input sets the value of the submit button selectEl.addEventListener('change', (e) => { confirmBtn.value = selectEl.value; }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', () => { outputBox.value = `ReturnValue: ${favDialog.returnValue}.`; });
Tweet us your tasty treats