Стилізація модальних вікон
Де в DOM знаходяться модальні вікна?
Я зазвичай розміщую HTML код модальних вікон перед закриває тегом body.
Роблю я це в основному з причин стилізації. Позиціонувати модальні вікна щодо тега body, який покриває всю сторінку, набагато легше, на відміну від незрозумілого набору батьківських елементів, у кожного з яких може бути свій контекст позиціонування.
Як це впливає на скрін рідери? Я не експерт по доступності, але чув, що модальні вікна досить складна штука. Роб Додсон:
Хто намагався хоч раз зробити модальні вікна доступним, знають, що, незважаючи на свій нешкідливий вид, модальні вікна - це як битва з босом в кінці гри під назвою веб-доступність. Вони проковтнуть вас і виплюнуть останки. Наприклад, правильне модальне вікно повинно мати такими особливостями:
фокус клавіатури повинен переміститися на модальне вікно, а при його закритті повинен повернутися до попереднього activeElement;
фокус клавіатури повинен бути заблокований на модальном вікні, щоб користувач випадково за допомогою клавіші Tab не вийшов за межі вікна;
скрін рідери також повинні бути заблоковані на модальном вікні, щоб випадково не вийти з нього.
Роб створив супер доступне демо з модальним вікном. Також я бачив недавній приклад листопада Блонях і Ніколаса Хоффмана. Також можна подивитися ARIA Live Regions. Якщо ви обробляєте фокус вручну, нижня частина сторінки найбільш підходящий варіант розміщення модального вікна.
центрування
Зараз я покажу вам один з улюблених трюків. Спосіб вертикального і горизонтального центрування без значень ширини і висоти:
Дуже добре підходить для модальних вікон, які зазвичай розташовані точно по центру екрану і можуть бути різної ширини. Висота вікна змінюється в залежності від контенту.
Якщо ви точно знаєте ширину і висоту вікна, можна скористатися іншими методами. Я взяв цей метод, тому що є шанс, що текст буде злегка розмитим і трансформується. Якщо ви не розумієте, про що я говорю, пошукайте інші методи в керівництві з центрування (наприклад, негативні margin'и).
Фіксоване розташування?
Зверніть увагу, ми використовували position: fixed ;. Суть в тому, що так користувач може прокрутити сторінку, викликати модальне вікно, і воно буде точно так же центрировано, як якщо б він відразу його викликав.
На мій погляд, фіксоване позиціонування зараз безпечно використовувати, навіть на мобільних пристроях. Однак якщо ви точно знаєте, що у вас досить велика аудиторія з дуже старими мобільними пристроями, з фіксованим розташуванням можуть виникнути проблеми. У такому випадку візьміть position: absolute і примусово прокручивайте сторінку вгору. Або що-небудь ще, не знаю, тестируйте інші способи.
Робота з шириною
На великих екранах звичайне модальне вікно не просто центрировано, воно також має обмежену ширину (як на скріншоті вище).
Проблемне місце. На великих екранах у нас все добре, але є безліч екранів, які в ширину навіть не 600px.
Легко виправити за допомогою max-width:
Робота з висотою
З висотою проблем ще більше. Контент адже може змінюватися! Метод центрування за допомогою трансформацій так і норовить відрізати верхівку вікна, а смуги прокрутки у нас немає:
Нас знову врятує максимальне значення:
Робота з перекриттям
Ми намагаємося вирішити питання з висотою модального вікна. Тепер нам потрібно врахувати ще й перекриття. Заманливо було б використовувати властивість overflow прямо на елементі .modal, але тут виникають дві проблеми:
у нас можуть бути елементи, які не потрібно прокручувати;
перекриття відріже тінь box-shadow, яка нам може знадобитися.
Я б запропонував ввести внутрішній контейнер:
Щоб область .modal-guts прокручувалась, їй необхідно вказати висоту. Тут багато способів. Один із способів - спозиционировать внутрішній контейнер так, щоб він перекривав всі модальне вікно, а потім додати перекриття:
Модальні вікна повинні примушувати користувача до якого-небудь дії, поки не сталося щось ще. Якщо вам не потрібно примушувати користувача до дії, розгляньте інший UI елемент. З модального вікна повинен бути вихід. Для модального вікна характерні різні кнопки і перемикачі (наприклад, «Видалити» / «Скасувати»), а також кнопка закриття. Додамо в наше вікно кнопку закриття.
Було б розумно, розташувати кнопку закриття так, щоб вона постійно була на виду. Щоб у користувача не виникло ситуації, коли він не знає, як закрити вікно. Ось для цього ми і залишили область без прокрутки.
Стилі додасте самі
Робота з накладенням
Модальні вікна часто з'являються на повноекранному перекриває тлі. Корисна річ по ряду причин:
перекриває шар може затемнювати сторінку, посилюючи тим самим основну мету модального вікна;
такий шар може врятувати від взаємодії з тим, що знаходиться поза модального вікна;
перекриває шар можна використовувати в якості великої кнопки закриття, скасування.
Закриття по класу, а не відкриття
Вкрай заманливо за замовчуванням заховати клас .modal за допомогою властивості display: none ;. Потім по відкриттю вікна додавати клас .modal.open
Бачите властивість display: block ;? Ось тут і проблема. Властивість display: none; дуже корисно, тому що воно ховає вікно не тільки візуально, але і від допоміжних технологій для людей з обмеженими можливостями. Легше застосовувати властивість поверх існуючого значення властивості display, а не переписувати значення навмання. Модальне вікно .modal може використовувати display: flex ;, display: grid; або що-небудь інше. Різні модальні вікна можуть використовувати будь-які значення і не боятися скинути його на display: block ;.
Перемикач відкриття і закриття
Самий базовий спосіб для відкриття і закриття вікна:
Вікно поки що ще недоступно для скрін рідерів. Згадайте, про що ми говорили вище. За посиланням ви знайдете демо, в якому фокус переходить на модальне вікно, блокується на ньому і повертається на той елемент, з якого прийшов.
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі