Красивое модальное окно на javascript. Создаём адаптивное модальное окно jquery

Если вы не можете ни выбрать верхнюю позицию для блока модального окна заранее, ни переместить его в начало дерева при помощи JavaScript , вы можете зациклить перемещение фокуса между первым и последним активным элементом в модальном окне.

Для этого необходимо сохранять в скрипте их идентификаторы. Когда пользователь нажмёт “Tab” в последнем элементе окна, вы переместите фокус на первый элемент. Нажатие “Shift”+“Tab ” должно обрабатываться зеркально.

Есть и другие варианты обработки перемещения фокуса. Например, вы можете переназначать и использовать в скрипте списки элементов ввода, между которыми разрешён переход фокуса. Или устанавливать tabindex=-1 на скрываемые активные элементы.

Первый и второй методы делают меню и кнопки браузера недоступными при управлении с клавиатуры. При этом походе критичны хорошо заметный элемент закрытия окна и перехват нажатия клавиши “Esc ” с той же целью. Иначе ваш сайт станет ловушкой для пользователей без мыши.

Третий подход сохранит возможность навигации по элементам управления браузером, но может быть весьма накладным с точки зрения быстродействия скрипта, ведь ему придётся перебрать множество активных элементов на сайте, как при открытии модального окна, так и при его закрытии – чтобы вернуть всем элементам основного контента возможность быть выбранными.

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

Закрытие

Модальное окно должно легко закрываться. Стандартные диалоги, вызываемые из JavaScript функцией alert() , могут быть закрыты нажатием клавиши “Esc ”. Будет хорошим тоном придерживаться этого соглашения при создании собственных диалогов.

Если диалог содержит много активных элементов, то гораздо лучше будет дать пользователю возможность закрыть его нажатием одной клавиши, нежели заставлять его пробегать по всем полям, чтобы добраться до кнопки «Закрыть »:

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

mOverlay.addEventListener("click", function(e) if (e.target == modal.parentNode) modalClose(e); } }, false);

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

Дополнительные меры по обеспечению доступности сайта

Существуют и другие способы помочь пользователям с ограниченными возможностями ориентироваться во Всемирной паутине. Спецификации WAI-ARIA покрывают все области взаимодействия пользователя с сайтом. В одних случаях достаточно немного дополнить разметку или стили, в других требуется оснастить сайт скриптами.

ARIA-HIDDEN

Устанавливая атрибуту aria-hidden значение true , вы можете скрывать содержимое элемента со всеми его дочерними элементами от программ, читающих экран. Необходимо учесть, что ARIA -элементы не обладают дефолтной стилизацией в браузерах. Чтобы скрыть их от зрячих пользователей, воспользуйтесь следующим CSS -кодом:

Modal-window { display: none; }

Обратите внимание на весьма специфичный селектор. В общем случае мы не хотим прятать абсолютно все элементы с aria-hidden=true. Вспомните предыдущий пример с кнопкой «X », чтобы понять, что имеется в виду.

ROLE=»DIALOG»

Добавьте свойство role=»dialog» ко всем элементам, содержащим модальный контент. Это укажет так называемым техническим средствам реабилитации, что данный контент требует реакции пользователя. Описанные нами скрипты, зацикливающие перемещение фокуса ввода между допустимыми активными элементами, отлично дополнят эту разметку.

Для оповещений, требующих от пользователя простого подтверждения, используйте role=»alertdialog» совместно с теми же скриптами.

ARIA-LABEL

Свойства aria-label и aria-labelledby используются совместно с role=»dialog» . Если ваше модальное окно имеет заголовок, укажите его идентификатор, например: aria-labelledby=modal_header_id . В противном случае задайте описание диалога в качестве значения свойства aria-label .

Как насчёт HTML5-диалогов?

На момент написания статьи Google Chrome версии 37 и ночные сборки Firefox уже научились поддерживать семантический элемент dialog .

Когда данный элемент станет общеупотребительным, это избавит нас от необходимости проставлять role=dialog в различных элементах. Пока же мы рекомендуем использовать role даже при наличии polyfill -библиотек для обеспечения поддержки устройств чтения экрана.

Замечательно то, что элемент dialog обладает не только семантическим значением, но и теми свойствами, которые могут заменить применяемые нами сегодня скрипты и стили.

Например, чтобы показать или спрятать диалог, мы обычно используем такой скрипт:

var modal = document.getElementById("myModal"), openModal = document.getElementById("btnOpen"), closeModal = document.getElementById("btnClose"); // для показа модального окна openModal.addEventListener("click", function(e) { modal.show(); // или modal.showModal(); }); // для закрытия модального окна closeModal.addEventListener("click", function(e) { modal.close(); });

Метод show() показывает диалог, вместе с тем оставляя пользователю доступ к остальному сайту. Метод showModal() запускает диалог и запрещает пользователю взаимодействовать с другими элементами сайта.

Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.

Куда вставить в DOM?

Обычно, я помещаю его перед закрывающим тэгом body.

В основном по причине стилей. Намного легче позиционировать модальное окно на CSS, когда вы имеете дело со слоем обертывающим весь body, чем с неизвестным набором родительских элементов, у которого потенциально может быть свое позиционирование.

Центрирование

Вот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.

Modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

Position – fixed?

Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.

Разберемся с шириной

На больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.

Modal { width: 600px; }

Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.

Modal { width: 600px; max-width: 100%; }

Высота

Задавать высотку еще более ответственное занятие. Мы знаем, что контент имеет свойство меняться. Плюс, техника центрирования через transform радостно обрезает края, без появления скролл-бара. Установка максимальной высоты обезопасит нас второй раз.

Modal { height: 400px; max-height: 100%; }

Overflow

После того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в.modal, однако, есть две проблемы с этим:

• Мы можем захотеть использовать элементы, которые не должны скролиться
• Overflow обрежет тень, которую мы будем использовать.

Я бы предложил использовать внутренний контейнер:

Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:

Modal-guts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* отступы */ padding: 20px 50px 20px 20px; /* разрешим скролить */ overflow: auto; }

Кнопки

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