Two modal component with transitions using Vue's teleport feature.
Created using Vue 3 and PicoCSS which is a CSS framework based on Semantic HTML5 with accessibility in mind.
- Both modal components can be closed by clicking outside of the modal-box
- Shows aria-busy loading indicator when clicking on
Show Modalbutton - In Firefox browsers, backdrop filter
will not work until they implement this CSS propertynow works as of v103.0+ - It is accessible and has semantic tags
- Minimal styles and works without PicoCSS
Closing modal by pressing escape key is the next feature that I will add
Teleport makes sure modal is the closed element in terms of depth because it is injected to just before the body end tag.
Compare BaseModal component with TeleportModal; when clicking on Show Modal button, aria-busy loading indicator is awefully visible on BaseModal. But on TeleportModal thanks to Vue's Teleport feature, Show Modal button loading will be rendered behind the modal-wrapper since it has a backdrop filter (blur) effect, so there is no unexpected behaviour.