Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Modals, Popups, Popovers, Lightboxes

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In this Hasty Treat, Scott and Wes talk through the differences between modals, popups, popovers, lightboxes, and dialog boxes. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:31">00:31</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=02:25">02:25</a> What’s popping up?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:59">02:59</a> What’s a modal?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=08:33">08:33</a> Pop overs and lightboxes</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=10:41">10:41</a> Explicit dismiss and light dismiss</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=11:30">11:30</a> Inert property</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert"> inert</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=16:30">16:30</a> Backdrop pseudo element</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://codepen.io/geckotang/post/dialog-with-animation">Dialog with animation</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=19:26">19:26</a> Dialog</li> <li class="has-line-data" data-line-start="14" data-line-end="16"> <a href="#t=28:12:11">28:12:11</a> Making accessibility easier</li> </ul> <pre><code class="has-line-data" data-line-start="17" data-line-end="36">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}.`; }); </code></pre> <h2 class="code-line" data-line-start="37" data-line-end="38"> <a id="Tweet_us_your_tasty_treats_37"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Modals, Popups, Popovers, Lightboxes

Poslechněte si podcast