Modals

Two common cases: the form lives in a modal and closes it after a success, or the form is on the page and a modal with the answer opens after it is sent. Both need the fetchit:success event.

No libraries

• <dialog> — the modal built into the browser
• popover — a pop-up block for small forms, opens without JavaScript

Libraries

• a11y-dialog — 2 KB, accessibility following the WAI-ARIA guidelines, no styles of its own
• Micromodal.js — a small library with accessible modals
• Bootstrap — if the site is built on Bootstrap
• UIkit — if the site is built on UIkit
• Fancybox — if the site already has Fancybox; a paid licence is required

A modal with a form needs one more rule: call form.reset() when the modal closes. FetchIt removes the errors and messages, and the next time the visitor sees a clean form.