Делаем модальные окна для сайта. Заботимся об удобстве и доступности

[@devopg]

для vue есть какая либа чтобы контентом модалки мог стать любой компонент?

[@savostin]

Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась.Самый простой способ этого добиться — повесить overflow:hidden для body или html,

Вот только на странице может быть «прокручиваемым» не body, а другой элемент…

[@Hystrider]

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

[@oinovikov]

Visibility анимируется.

[@Hystrider]

Да, действительно, посмотрел ещё раз спецификацию, можно указать для блока отдельно transitions. Нужно посмотреть, можно ли упростить код, и немножко поправить текст статьи, спасибо за наводку.

[@podolskijspace]

Спасибо, было полезно

[@BlackStar1991]

Спасибо, сам на днях решал проблемы с модалкой описанные в начале статьи по позиционированию её по центру. Как-то опробую.

[@KoiLVeD]

при таком фиксе странице(под сафари position: fixed), есть проблемы с общими элементам со значением fixed, например header. На него не распространяется отступ справа и он сдвигается(ширина увеличивается). как такой кейс обходите?

[@Hystrider]

Да, кажется это появляется во всех браузерах где есть скролл. В будущих версиях я планирую встроить настройку, которая будет добавлять/убирать всем элементам с определенным css-классом доп. отступ при открытии/закрыти окна.
Нужно только проверить, чтобы это не конфликтовало с возможными css-свойствами у fixed элементов.

[@css-html-guru]

Очень много кода для модального окна. Любую модалку можно сделать используя только html и css! Модалка будет с поддержкой ie11, закрываться при клике вне окна + при клике на крестик или кнопку в самом окне, также не будет сдвига на 17 пикселей (в хроме), когда модалка имеет скролл по оси Y и никакой js вам не будет нужен.

[@Hystrider]

Как я писал в статье в начале, я смотрел варианты с окнами без JS, но у них всегда были какие-то проблемы, либо ими было неудобно пользоваться из-за излишней html-разметки. Чаще всего недостатки такие:

— Нельзя открыть окно кликом по любому элементу (например с data-аттрибутом), обычно делаются на основе checkbox и label.
— Если есть примеры без сдвига для скроллбара и чтобы страница не прокручивалась то хотел бы глянуть, как это реализовано.
— Фокус ведёт себя не совсем удобно, а также не закрыть окно по esc.
— нет возможности запустить js-коллбеки.
— сложности с открытием одного окна из другого.

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

[@sh3mahan]

Hystrider в плане юзабилити заметил недостаток, чтобы закрыть на мобилке лонг окно придется промотать вверх до крестика, а т.к. ширина окна 100% то клик вне его тоже не работает. Вариант решения: плавающий крестик с position: fixed, если модальное окно больше окна браузера.

[@Hystrider]

Да, в принципе так можно сделать, но наверное это уже кастомное решение на CSS, которое можно встроить на любую страницу по необходимости :)

[@aleksei13b]

Спасибо автору, это лучшее решение, что я встречал. Shift-tab сломан, где он определяется в методе focusCatcher, надо добавить preventdefault и переменная focusableNodes она без обьявления и соответсвенно выдает ошибку

[@Hystrider]

Благодарю.
Действительно, что-то пошло не так с ctrl+shift, я не заметил опечатку. В статье поправил, там естественно не «focusableNodes» а «nodesArray», и preventdefault добавил, нужно будет в гитхабе тоже заменить.