I see lightbox and modal as being the same thing. I don't know if people do even newer developers use it at all. Inert is an attribute you can put on a Element yeah, and basically what it does is it it stops scrolling. The way that we always did this before in the past like to freeze the background of a website when a modal's open is Via the overflow hidden on the body or whatever You do and that freezes the background from scrolling well a nerd is kind of like that.
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