A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question β†’
Wes Bos

Wes Bos

XL5G3 Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, NX2V1, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 602: Modals, Popups, Popovers, Lightboxes

0:00

LOUDNESS

Apr 17th, 2023

Modals, Popups, Popovers, Lightboxes

πŸ‘‡ Download Show✏️ Edit Show Notes

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