Scott Tiolinsky, West Barracuda boss and Scott El Toro local Tiolinsky Welcome to syntax and this Hasty treat we're gonna be popping into your podcast player. Monday Monday Monday open wide dev fans get ready to stuff your face with JavaScript CSS node modules Get workflows Soft skills web development the hasty is the carrheysiaThe tastiest web development treats coming in hot Here are some terms you should know about: modals pop-ups pop-overs light boxes dialogues so many words for different things that can pop up or perhaps just gain your attention We're gonna be talking about the terms behind them But also the HTML and JavaScript for some of these newer HTML
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