[Из песочницы] Делаем модальные окна для сайта. Заботимся об удобстве и доступности

Скрипты и советы | 18 сентября 2020

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов, CSS, JavaScript, HTML, Accessibility, Модальные окна, модальное окно, html, css, js, javacript, библиотека javascript, library, a11y, доступность, вёрстка, ui/ux, разработка сайтов,

Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.


Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.


В итоге было задумано сделать собственное простое решение.


Читать дальше →
[Из песочницы] Модальные окна, которые мы заслужили

Начнем В разных критериях и манифестах качества есть такой пункт, как блокировка скролла страницы, когда открыто...

Подробнее
[Из песочницы] Унификация визуальных компонентов. Часть 1. Стили

Данная статья будет, прежде всего, полезна разработчикам, которые не работают с готовыми наборами компонентов, такими...

Подробнее
[Из песочницы] Способы создания окон PopUp

Введение В данном уроке я не открою тайну для матерых верстальщиков и гуру css, но данная статья будет полезна...

Подробнее
[Из песочницы] Responsive design: сохранение формы элементов разметки

Одним из приемов адаптивного веб-дизайна является установка размеров элементов разметки в процентах относительно...

Подробнее
Новогодний стикер с Сантой

Продолжаем украшать сайт, добавляя тематические вставки. В этот раз через раздел управление рекламой добавим на сайт...

Подробнее
Бесплатный шаблон BS3-TCSE для DataLife Engine

Подарки под Елочку не обязательно класть прямо 31 декабря, очень даже к месту будет в течении новогодних каникул. В...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями