Greetings, one and all! OK
Greetings, one and all!
Open dialog Hello, would you like to do something cool? Go to hell! Let's go!
const showButton = document.getElementById('showDialog'); const favDialog = document.getElementById('favDialog'); const outputBox = document.querySelector('output'); // "Show the dialog" button opens the modally showButton.addEventListener('click', () => { favDialog.showModal(); }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', () => { outputBox.value = `ReturnValue: ${favDialog.returnValue}.`; });
.Modal::backdrop { background-color: #333333; visibility: visible; opacity: 1; }
.show()
.showModal()
::backdrop
.close()
dialog.returnValue
close
cancel
function Modal({ children, open, onRequestClose }) { const dialogRef = React.useRef(null); React.useEffect(() => { const dialogNode = dialogRef.current; if (open) { dialogNode.showModal(); } else { dialogNode.close(); } }, [open]) React.useEffect(() => { const dialogNode = dialogRef.current const handleCancel = (event) => { event.preventDefault(); onRequestClose(); } dialogNode.addEventListener('cancel', handleCancel); return () => { dialogNode.removeEventListener('cancel', handleCancel); } }, [onRequestClose]); return {children}; }