Day 04: Modal Dialog
Open and close a modal dialog using buttons and overlay click.
JavaScript focus
- selecting the dialog and trigger buttons
- opening the dialog with the native method
- closing the dialog with the native method
- handling click events for open and close controls
- handling cancel / close behavior cleanly
- optional body class toggle for page-level styling
Nice extras
- return focus to the trigger that opened it
- support multiple trigger buttons for the same dialog
- close on backdrop click
- add a simple open / close animation class
- prevent page scroll while open with a body class
- include a confirm button and read the dialog's returnValue