Комментарии 16
для vue есть какая либа чтобы контентом модалки мог стать любой компонент?
Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась.Самый простой способ этого добиться — повесить overflow:hidden для body или html,
Вот только на странице может быть «прокручиваемым» не body, а другой элемент…

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

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

Спасибо, сам на днях решал проблемы с модалкой описанные в начале статьи по позиционированию её по центру. Как-то опробую.
при таком фиксе странице(под сафари position: fixed), есть проблемы с общими элементам со значением fixed, например header. На него не распространяется отступ справа и он сдвигается(ширина увеличивается). как такой кейс обходите?
Да, кажется это появляется во всех браузерах где есть скролл. В будущих версиях я планирую встроить настройку, которая будет добавлять/убирать всем элементам с определенным css-классом доп. отступ при открытии/закрыти окна.
Нужно только проверить, чтобы это не конфликтовало с возможными css-свойствами у fixed элементов.

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

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

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

В принципе, если всё это не важно, то ничего не имею против окон без JS, но в принципе, получившийся минифицированный js-код не очень много весит.
Hystrider в плане юзабилити заметил недостаток, чтобы закрыть на мобилке лонг окно придется промотать вверх до крестика, а т.к. ширина окна 100% то клик вне его тоже не работает. Вариант решения: плавающий крестик с position: fixed, если модальное окно больше окна браузера.
Да, в принципе так можно сделать, но наверное это уже кастомное решение на CSS, которое можно встроить на любую страницу по необходимости :)
Спасибо автору, это лучшее решение, что я встречал. Shift-tab сломан, где он определяется в методе focusCatcher, надо добавить preventdefault и переменная focusableNodes она без обьявления и соответсвенно выдает ошибку
Благодарю.
Действительно, что-то пошло не так с ctrl+shift, я не заметил опечатку. В статье поправил, там естественно не «focusableNodes» а «nodesArray», и preventdefault добавил, нужно будет в гитхабе тоже заменить.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.