You just simply use the open attribute and pop a Translate x or translate y value on it And it animates itself in that's nice. That's So cool that you don't have to add There are like two classes usually with animations what you have to do is you click ityou add like a In-out opening class and then you like position it off screen and then you add an open class Like The next millisecond and then it will give you your animation.
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