The new dialogue element is essentially a built-in pop-up. It's not going to do anything functionally, but it will make dialogues that are not built using the new dialogue element more accessible. The backdrop pseudo element has kind of a limited use case. It only works with things in full screen instead of the full screen api. And you can use the backdrop pseudo element to style the backdrop. You no longer have to have a position to div behind z and x behind whatever you're doing. So hey, uh happy to have backdrop.
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