Это лишь один небольшой пример того, как семантическая разметка упрощает пользование сайтом. Мы должны всесторонне внедрять семантический веб, чтобы создавать сайты, удобные для всех.
Семантическая разметка поможет нам сделать наше модальное окно более удобным и доступным. А правильное использование стилей и скриптов поднимет юзабилити нашего сайта на новый уровень!
Используйте состояние :focus
в ваших стилях. Это улучшит не только модальные окна, но и всё управление сайтом. Часто состояние :focus
, используемое браузером по умолчанию, переписывается css-reset
-стилями, или само по себе недостаточно выделяет активные элементы, или не вписывается в общее оформление сайта.
Хотя, получение фокуса с клавиатуры и наведение указателя мыши – это всё же два различных состояния, и разумно будет дать им собственные, отличные от других стили:
Btn:hover {
background: #f00;
}
:focus {
box-shadow: 0 0 3px rgba(0,0,0,.75);
}
Каждый элемент, способный получить фокус, должен быть стилизован таким образом. В крайнем случае, если вы не хотите использовать свой стиль :focus
, позаботьтесь о том, чтобы сохранить дефолтный стиль браузера – обычно это пунктирное подчёркивание или рамка вокруг активного элемента, имеющего фокус.
При открытии модального окна и перемещении фокуса необходимо сохранять предыдущий активный элемент. Тогда при закрытии модального окна пользователь сможет продолжить своё взаимодействие с сайтом на том же месте, на котором модальное окно заставило его прерваться.
Это работает как подобие закладки. Без такой функции пользователь переместится к началу страницы, и будет вынужден искать нужный ему контент заново, что обескураживает. Проблему сохранения фокуса может решить вот такой скрипт:
var lastFocus;
function modalShow () {
lastFocus = document.activeElement;
}
function modalClose () {
lastFocus.focus(); // place focus on the saved element
}
При появлении модального окна фокус должен переместиться на него или на первый интерактивный элемент в нём. Тогда пользователю не придётся браться за мышь или перебирать клавишей “Tab
” десятки полей и кнопок:
Если ваше модальное окно занимает весь экран, позаботьтесь о том, чтобы элементы управления в основном окне стали на время недоступны. Иначе любой пользователь может продолжить вводить что-то в основное окно, думая при этом, что взаимодействует с модальным. Обеспечить желаемое может скрипт, подобный этому:
function focusRestrict (event) {
document.addEventListener("focus", function(event) {
if (modalOpen && !modal.contains(event.target)) {
event.stopPropagation();
modal.focus();
}
}, true);
}
Закрывая для пользователя основной экран, мы всё же должны обеспечить для него доступ к элементам управления браузером при помощи всё той же кнопки “Tab
”. Такого поведения от нашего окна ожидают и обычные, зрячие пользователи.
Вышеприведённый скрипт предотвращает переход фокуса в основной документ, вместо этого перемещая его обратно к первому элементу модального окна.
Если мы заодно поместим модальное окно в вершину дерева DOM
, сделав его первым потомком
, то комбинация “Shift”+“Tab
” позволит пользователю переключить фокус на элементы управления браузером:
var m = document.getElementById("modal_window"),
p = document.getElementById("page");
//
должен окружать всю страницу, чтобы можно было применить
// aria-hidden="true" к главному контенту при открытии модального окна.
function swap () {
p.parentNode.insertBefore(m, p);
}
swap();
Если вы не можете ни выбрать верхнюю позицию для блока модального окна заранее, ни переместить его в начало дерева при помощи 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()
запускает диалог и запрещает пользователю взаимодействовать с другими элементами сайта.
В статье о создание модального окна на css мы разобрали что такое модальное окно и зачем оно нужно. А
так же создали окно используя только css. В этой статье я опишу как создать модальное окно javascript. А конкретнее мы будем для создания использовать
библиотеку jquery.
И так начнём создавать модальное окно на jquery. Для усложнения задачи поставим такое условие. Нам нужно будет создать адаптивное модальное окно. А адаптивность
будет заключаться в том, что окно при уменьшении размера экрана то же будет уменьшаться. Адаптивное модальное окно jquery начнём создавать с html разметки.
С кодом я думаю всё понятно. Имеем оболочку.wraper, где находится контент нашего сайта. Есть кнопка вызова модального окна с идентификаторм gowindow,
само окно с ид modal_window и перекрывающий слой myoverlay. Напишем теперь css стили.
Wraper {
width: 100%;
margin: auto;
width: auto;/*то же что и 100%*/
max-width: 960px;/*максимальная ширина обёртки*/
border: 1px solid #000;
background-color: #F5F9FB;
}
.button{
/*-------*/
}
#modal_window {
width: 34%;/*для адаптивности*/
height: 300px;
border-radius: 10px;
border: 3px #fff solid;
background: #e0e0e0;
margin-top: -30%;
margin-left: 33%;
display: none;
opacity: 0; /*полная прозрачность для анимации */
z-index: 5000; /*окно должно быть верхним слоем*/
padding-top: 20px;
text-align: center;
position: relative;
}
#modal_window #window_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
#myoverlay {
z-index: 3000; /*выше всех слоёв но ниже окна */
position: fixed; /*для перекрытия сайта*/
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%; /*полностью на экран */
top: 0;
left: 0;
cursor: pointer;
display: none;
}
Опишем css код. Блок.wraper задаём адаптивным, он меняется от размера экрана но не более 960px. Код кнопки показывать не буду. Ширину окна #modal_window
задаём в процентах, ширина будет зависеть от ширины.wraper. Для центровки окна задаём марджин 33%. Он расчитывается так 50%-17%, где 17% половина ширины окна.
Скрываем окно свойствами display: none и opacity: 0. С кодом #window_close и #myoverlay я думаю всё ясно. Давайте теперь напишем код для jquery. Будем
считать что jqery уже подключена.
$(document).ready(function() {
$("#gowindow").click(function(){//клик по кнопке
$("#myoverlay").fadeIn(400, //показываем перекрывающий слой
function(){
$("#modal_window")
.css("display", "block") //делаем окно видимым.animate({opacity: 1, top: "50%"}, 200); //увеличиваем прозрачность, окно плавно съезжает
});
});
/* убираем окно */
$("#window_close, #myoverlay").click(function(){ //нажатие по перекрывающему слою или кресту
$("#modal_window")
.animate({opacity: 0, top: "45%"}, 200, //вкл прозрачность, окно идёт вверх
function(){
$(this).css("display", "none"); //делаем окно невидимым
$("#myoverlay").fadeOut(400); //убираем слой перекрытие
});
});
});
Js код я думаю в объяснении не нуждается, так как я его достаточно хорошо прокомментировал. На этом я думаю всё, так что подведём итоги. Мы сделали простое адаптивное
модальное окно jquery
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTML
Первый шаг на пути к созданию модального окна - простая и эффективная разметка:
Открыть модальное окно
Внутри элемента div
размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
Открыть модальное окно
X
Модальное окно
Пример простого модального окна, которое может быть создано с использованием CSS3.
Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.
Стили
Создаем класс modalDialog
и начинаем формировать внешний вид:
ModalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index
.
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events
, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog
, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”
.
Теперь добавляем псевдо класс :target
и стили для модального окна.
ModalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
Псевдо класс target
изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events
.
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окно
Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.
