The new dialogue element can be interacted with with html and javascript. It has an open attribute on it when it's open the Dialogue is open as in it's popped up. If you have a form inside of a dialogue if you set the method of the form to be dialogue when you click The submit button on your form it will close the dialogue for you Um, so that's kind of neat Okay I got an example right here. Let's let's test it in In chrome. Yeah, it's it's working in chrome. Hey, it's just a nice little touch That's one of those things that like you just take an extra three seconds To style the backdrop and when somebody full
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