Modals, Popups, Popovers, Lightboxes

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 <dialog> 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