Comments 16
для vue есть какая либа чтобы контентом модалки мог стать любой компонент?
Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась.Самый простой способ этого добиться — повесить overflow:hidden для body или html,Вот только на странице может быть «прокручиваемым» не body, а другой элемент…
Visibility анимируется.
Спасибо, было полезно
Спасибо, сам на днях решал проблемы с модалкой описанные в начале статьи по позиционированию её по центру. Как-то опробую.
при таком фиксе странице(под сафари position: fixed), есть проблемы с общими элементам со значением fixed, например header. На него не распространяется отступ справа и он сдвигается(ширина увеличивается). как такой кейс обходите?
Да, кажется это появляется во всех браузерах где есть скролл. В будущих версиях я планирую встроить настройку, которая будет добавлять/убирать всем элементам с определенным css-классом доп. отступ при открытии/закрыти окна.
Нужно только проверить, чтобы это не конфликтовало с возможными css-свойствами у fixed элементов.
Нужно только проверить, чтобы это не конфликтовало с возможными css-свойствами у fixed элементов.
Очень много кода для модального окна. Любую модалку можно сделать используя только html и css! Модалка будет с поддержкой ie11, закрываться при клике вне окна + при клике на крестик или кнопку в самом окне, также не будет сдвига на 17 пикселей (в хроме), когда модалка имеет скролл по оси Y и никакой js вам не будет нужен.
Как я писал в статье в начале, я смотрел варианты с окнами без JS, но у них всегда были какие-то проблемы, либо ими было неудобно пользоваться из-за излишней html-разметки. Чаще всего недостатки такие:
— Нельзя открыть окно кликом по любому элементу (например с data-аттрибутом), обычно делаются на основе checkbox и label.
— Если есть примеры без сдвига для скроллбара и чтобы страница не прокручивалась то хотел бы глянуть, как это реализовано.
— Фокус ведёт себя не совсем удобно, а также не закрыть окно по esc.
— нет возможности запустить js-коллбеки.
— сложности с открытием одного окна из другого.
В принципе, если всё это не важно, то ничего не имею против окон без JS, но в принципе, получившийся минифицированный js-код не очень много весит.
— Нельзя открыть окно кликом по любому элементу (например с data-аттрибутом), обычно делаются на основе checkbox и label.
— Если есть примеры без сдвига для скроллбара и чтобы страница не прокручивалась то хотел бы глянуть, как это реализовано.
— Фокус ведёт себя не совсем удобно, а также не закрыть окно по esc.
— нет возможности запустить js-коллбеки.
— сложности с открытием одного окна из другого.
В принципе, если всё это не важно, то ничего не имею против окон без JS, но в принципе, получившийся минифицированный js-код не очень много весит.
Hystrider в плане юзабилити заметил недостаток, чтобы закрыть на мобилке лонг окно придется промотать вверх до крестика, а т.к. ширина окна 100% то клик вне его тоже не работает. Вариант решения: плавающий крестик с position: fixed, если модальное окно больше окна браузера.
Спасибо автору, это лучшее решение, что я встречал. Shift-tab сломан, где он определяется в методе focusCatcher, надо добавить preventdefault и переменная focusableNodes она без обьявления и соответсвенно выдает ошибку
Sign up to leave a comment.
Делаем модальные окна для сайта. Заботимся об удобстве и доступности