Skip to content
  1. Компоненты
  2. FetchIt
  3. Модальные окна

Модальные окна ​

Два частых сценария: форма живёт в модальном окне и закрывает его после успеха, или форма на странице, а после отправки открывается окно с ответом. В обоих случаях нужно событие fetchit:success.

Без библиотек ​

  • <dialog> — модальное окно, встроенное в браузер
  • popover — всплывающий блок для небольших форм, открывается без JavaScript

Библиотеки ​

  • a11y-dialog — 2 КБ, доступность по рекомендациям WAI-ARIA, без своих стилей
  • Micromodal.js — маленькая библиотека с доступными окнами
  • Bootstrap — если сайт на Bootstrap
  • UIkit — если сайт на UIkit
  • Fancybox — если Fancybox уже есть на сайте; нужна платная лицензия

Для окна с формой пригодится ещё одно правило: при закрытии окна вызывайте form.reset(). FetchIt снимет ошибки и сообщения, и в следующий раз посетитель увидит чистую форму.