Всем Привет! В этой статье разберем как создать простой компонент модального окна в React JS с нуля. Если задать в поиске фразу - модальное окно для React JS, то можно найти огромное количество готовых библиотек. Так сказать - подключай и используй. Но, чтобы понять, как именно это работает, нужно хотя бы один раз написать компонент модального окна самостоятельно. В нашем случае это будет SimpleModal Component, но Вы можете назвать его по своему. Если формат изложения материала в виде текста Вам не подходит, то можете посмотреть видео или скачайте готовый проект с github...
💬 Как делать модальные окна удобными: 5 быстрых советов. Модальное окно появляется поверх страницы и блокирует действия с ней до тех пор, пока пользователь его не закроет. Их расположение нужно тщательно продумывать — они могут помешать пользоваться сайтом или приложением. Чтобы не доставлять пользователям неудобств, соблюдайте несколько простых правил: ▫️Не используйте модальные окна при открытии страниц. Когда пользователь только заходит на сайт или в приложение, у него есть конкретная цель. Даже самое маленькое модальное окно будет отвлекать и раздражать. Если при входе нужно что-то сообщать, лучше отдать предпочтение баннеру или поп-апу. ▫️Не пишите в модальных окнах сообщения об ошибке. Чтобы понять причину ошибки и устранить ее, пользователю нужно увидеть всю информацию на экране, а модальное окно скроет ее. ▫️Не делайте множество вариантов дизайна окон внутри одного приложения. Пользователям будет проще взаимодействовать с интерфейсом, если все модальные окна будут одинаковыми, то есть одинаковой формы, цвета и ширины. ▫️Не забывайте о кнопке закрытия. У пользователя должна быть возможность быстро закрыть окно в любой момент. Лучше всего расположить кнопку закрытия в правом верхнем углу и закрепить при прокрутке — так после просмотра содержания не придется возвращаться вверх. ▫️Не используйте вложенные модальные окна. Дополнительные окна поверх модального окна создают визуальный беспорядок и усложняют работу с интерфейсом.