MDN says it displays the dialogue element interface as a modal Mm-hmm over top of any other dialogues that might be present. Interaction outside the dialogue is blocked And content outside is rendered inert. You can easily get access to the return value of the dialogue itself via dot return value on the dialogue so hey pretty neat, huh? The one thing that always kind of bugged me about this stuff was There's you know when they think about this stuff They just say hey it works and then if you want to animate it you have to like dive into a whole bunch of different stuff.
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