Playing: 602: Modals, Popups, Popovers, Lightboxes
0:00
LOUDNESS
Episode 574
|Feb 10th, 2023
Supper Club Γ Qwik framework from MiΕ‘ko Hevery, the Creator of Angular
Episode 393
|Oct 4th, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and Weβre Just Re-Creating It
Apr 17th, 2023
Modals, Popups, Popovers, Lightboxes
π Download ShowβοΈ Edit Show NotesIn 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