Modals that have their own URLs. This is something that popped up a while ago people said Oh, what we're using a router in our application. So oh man. Why not give the modal its own URL? I don't like that as having its own URL if it's obviously just a little alert window or something Like there there's some sites that do that where they like Really hijack your browser history so that you have to hit the back button 800 times through like a slideshow or something like that Yeah,. And and that kind of feels the same vibe to me with giving a modal a URL But you know I think that's maybe situational We're like you know like reddit
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