In this Hasty Treat, Scott and Wes talk through the differences between modals, popups, popovers, lightboxes, and dialog boxes.

Show Notes * 00:31 Welcome * 02:25 What’s popping up? * 02:59 What’s a modal? * 08:33 Pop overs and lightboxes * 10:41 Explicit dismiss and light dismiss * 11:30 Inert property * inert * 16:30 Backdrop pseudo element * Dialog with animation * 19:26 Dialog * 28:12:11 Making accessibility easier

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 * Scott’s Instagram * LevelUpTutorials Instagram * Wes’ Instagram * Wes’ Twitter * Wes’ Facebook * Scott’s Twitter * Make sure to include @SyntaxFM in your tweets