Modals, Popups, Popovers, Lightboxes

Syntax - Tasty Web Development Treats

Wes Bos

Technology, News, Tech News

4.9 • 1.2K Ratings

🗓️ 17 April 2023

⏱️ 29 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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

Transcript

Click on a timestamp to play from that location

0:00.0	Monday! Monday! Monday! Open wide dev fans! Get ready! To stuff your face with
0:07.0	JavaScript CSS! Node modules! Barbecue tips! Get workflow! Break dancing! Soft skills!
0:12.0	Web development! The hastiest! The craziest! The tastiest! Web development
0:17.0	treats! Coming in hot! Here is Wes Barakuda! Boss and Scott El Torro Lugo!
0:24.0	Tolinsky!
0:27.0	Welcome to syntax and this hasty treat! We're going to be popping into your
0:33.0	podcast player and talking about models, pop-ups, pop-overs, lightboxes, dialogues,
0:38.0	so many words for different things that can pop up and it merely maybe obstruct
0:44.0	what you're doing or perhaps just gain your attention. We're going to be talking about
0:48.0	the terms behind them, but also the HTML and JavaScript for some of these newer
0:53.0	HTML elements that we're going to be dealing with. My name is Scott Tolinsky. I'm a
0:58.0	developer from Denver and with me as always is Wes, the I was going to try to come
1:05.0	up with something like a B sounding for pop-ups, pop-ups, boss.
1:11.0	Bottle. Yeah. Bottle.
1:14.0	Awesome. Wes, how's it going, Ann?
1:16.0	Pretty good, pretty good. Just got back from the cottage weekend, which was pretty
1:21.0	fun. We went up. There's still quite a bit of snow, which is we're recording this
1:26.0	on April 3rd, so all the snow at our house has gone thankfully, but we got one
1:31.0	last little play around in the snow at the kids and they had fun.
1:34.0	Oh, that's great. Our lawn starting to turn green and I'm just feeling
1:39.0	that vibes. I was working outside. We had some crazy high winds, like a very,
1:44.0	very high winds, like a lot of people had storms recently and the door of our
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.