You could just use the attribute open and so I posted a code pen in here um That shows you adding animation to a dialogue via css animations using just animation. They have an example for closing it, but oddly enough closing it is Harder for some reason because you do need to add the class When you want to animate it on hiding you have to do it with a class. And none of it necessarily feels incredible some of it does feel pretty good Um, but there's definitely opportunities here to make something kind of interesting.
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