Modals, Popups, Popovers, Lightboxes

<p class="has-line-data" data-line-start="0" data-line-end="1">In this Hasty Treat, Scott and Wes talk through the differences between modals, popups, popovers, lightboxes, and dialog boxes.</p> <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"> <strong><a href="#t=00:31">00:31</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:25">02:25</a></strong> What’s popping up?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:59">02:59</a></strong> What’s a modal?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=08:33">08:33</a></strong> Pop overs and lightboxes</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=10:41">10:41</a></strong> Explicit dismiss and light dismiss</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=11:30">11:30</a></strong> 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"> <strong><a href="#t=16:30">16:30</a></strong> 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"> <strong><a href="#t=19:26">19:26</a></strong> Dialog</li> <li class="has-line-data" data-line-start="14" data-line-end="16"> <strong><a href="#t=28:12:11">28:12:11</a></strong> 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(