A modal is intentionally disruptive keep that in mind intentionally disruptive It's trying to disrupt whatever the user's doing to put something in front of them You also have something called a pop over now I never really used the term pop over before but I found that this is pretty This is pretty like standard in terms of how people talk about these things and sort of research circles. A lightbox is really just like an old-school jQuery plugin name that kind of became something that people just Associated with the thing itself. The name actually comes from the photography lightbox where you have like a box And you're trying to show off something to take a photo of it or whatever.
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