Как сделать длинное модальное окно

Добавил пользователь Алексей Ф.
Обновлено: 18.09.2024

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

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

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

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

Но представьте себе, что вы управляете браузером при помощи клавиатуры интернет-киоска, дисплея Брайля или устройства голосового ввода, а появившееся модальное окно не переместило фокус ввода на свою кнопку или поле, а оставило его где-то под собой, в остальном контенте сайта. Это приведёт сайт в негодность для использования на нашем устройстве.

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

Семантика кода способствует доступности сайта

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

Чтобы можно было переместить фокус ввода на данный

, мы должны использовать атрибут tabindex . Кроме того, состояние, описываемое псевдо-селектором :focus , позволит идентифицировать его как активный элемент. Это сделает управление сайтом при помощи альтернативных устройств возможным, но не слишком простым.

Лучшим решением в данной ситуации будет использовать тэг для обозначения активного элемента, а также добавить в разметку свойство aria-label , специально предназначенное для устройств чтения экрана:

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

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

Делаем модальные окна удобными и доступными

Семантическая разметка поможет нам сделать наше модальное окно более удобным и доступным. А правильное использование стилей и скриптов поднимет юзабилити нашего сайта на новый уровень!

Добавление состояния :focus

Используйте состояние :focus в ваших стилях. Это улучшит не только модальные окна, но и всё управление сайтом. Часто состояние :focus , используемое браузером по умолчанию, переписывается css-reset -стилями, или само по себе недостаточно выделяет активные элементы, или не вписывается в общее оформление сайта.

Допустим вариант, когда вы объединяете состояния :focus и :hover :

Хотя, получение фокуса с клавиатуры и наведение указателя мыши – это всё же два различных состояния, и разумно будет дать им собственные, отличные от других стили:

Каждый элемент, способный получить фокус, должен быть стилизован таким образом. В крайнем случае, если вы не хотите использовать свой стиль :focus , позаботьтесь о том, чтобы сохранить дефолтный стиль браузера – обычно это пунктирное подчёркивание или рамка вокруг активного элемента, имеющего фокус.

Сохранение последнего активного элемента

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

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

Перемещение фокуса

При появлении модального окна фокус должен переместиться на него или на первый интерактивный элемент в нём. Тогда пользователю не придётся браться за мышь или перебирать клавишей “ Tab ” десятки полей и кнопок:

На полный экран

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

Закрывая для пользователя основной экран, мы всё же должны обеспечить для него доступ к элементам управления браузером при помощи всё той же кнопки “ Tab ”. Такого поведения от нашего окна ожидают и обычные, зрячие пользователи.

Вышеприведённый скрипт предотвращает переход фокуса в основной документ, вместо этого перемещая его обратно к первому элементу модального окна.

Если мы заодно поместим модальное окно в вершину дерева DOM , сделав его первым потомком , то комбинация “ Shift”+“Tab ” позволит пользователю переключить фокус на элементы управления браузером:

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

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

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

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

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

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

Закрытие

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

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

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

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

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

ARIA-HIDDEN

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

ARIA-LABEL

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

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

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

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

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

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

Элемент dialog имеет свойство open , содержащее true либо false и заменяющее aria-hidden . Псевдо-элемент :backdrop позволит нам использовать особый стиль окна, когда оно запущено при помощи showModal() .

Элемент dialog имеет и другие полезные свойства. Хоть он и не готов пока для использования в массовой разработке, в недалёком будущем он может здорово упростить создание современных, доступных сайтов.

Что дальше?

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

Я подготовил демонстрацию модального окна, использующую все вышеперечисленные методы улучшения доступности.

Привет друзья, в этому году меня несколько раз просили объяснить, как сделать модальное окно на сайте. Кто-то, изучая азы веб-разработки неизбежно приходил к ситуации, когда часть контент необходимо отобразить в модальном окне, кто-то, работая с формами, хочет показать ее не в открытом виде, а в pop-up при клике на кнопку.

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

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

Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:

модальное окно с использованием jQuery.
Простое модальное окно с использованием чистого js.

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

Структура проекта для понимания какие файлы и где находятся.

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

Где "modal" — это затемненный фон, а "modal__content" - область контента. При этом, когда срабатывает триггер, вызывающий окно, например нажатие кнопки, то к "modal" добавляется класс "modal_active", который дает понять, что модальное окно находится в открытом состоянии. Добавляя или удаляя "modal_active" мы будем открывать или скрывать модальное окно манипулирую стилями.

Большинству читающих нужна будет форма в модальном окне. Можно использовать эту.

Я, для примера, просто выведу текст:

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

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

Обратите внимание, что в правом углу контентной области модального окна появилась кнопка с изображением крестика. Файл лежит в папке "img", рядом с папкой "js" и "css".

Тут нас больше всего интересует класс ".modal". Как я и говорил, это само модальное окно с полупрозрачным фоном. Давайте подробнее разберем что там за стили.

Первым делом "вырвем" из потока блок с модальным окном при помощи фиксированного позиционирования. Затем, при помощи свойств "top", "left", "right", "bottom" растянем модальное окно по ширине на весь экран. Z-index - нужен для того, чтобы расположить окно над всеми элементами. Если у кого-то другого элемента значение этого свойства будет выше, то модальное окно не перекроет его.

Далее задаю цвет фона модального окна.

Цвет задаю в RGBA формате. Первые 3 цифры — это цвет, а последняя — прозрачность. Где ".9" — это прозрачность в 90%.

Далее использую flexbox для центрирования элемента "modal__content" внутри "modal", задаю возможность вертикальной прокрутки и внутренние отступы.

Окно прекрасно смотрится, но есть одно "но!". Помните я говорил, что активное состояния модального окна, это когда у нас есть класс "modal_active", а без этого класса, окно закрыто? Сейчас мы доведем до ума эту концепцию. Суть в том, чтобы при "modal" сделать окно скрытым, а при "modal_active" - показать.

Давайте создадим этот класс в стилях и настроим отображение окна только при его наличии.

Для показа/скрытия окна будем пользоваться "visibility", "opacity", "position" и свойство "transition" для плавности анимации появления.

Если еще подробнее, то сначала зададим нулевую прозрачность, а при помощи абсолютного позиционирования и свойства "top" уберем модальное окно за пределы видимости. Дополнительно, для надежности, при помощи свойства "visibility" скроем разметку окна.
В момент, когда появится класс "modal_active" инвертируем "visibility" и "opacity", а также поменять "position" и положение в свойстве "top".

Звучит страшнее, чем кажется, на сам деле все довольно просто.

Теперь в таком состоянии окно скрыто:

А в таком, окно открыто:

Попробуйте добавить вручную и убедиться, что окно успешно появляется.

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

Но прежде нужно подключить файл скриптов к нашей html страничке. Делается это так:

Вызов модального окна при помощи jQuery

Исходник модального окна с использованием jQuery

Первым делом нужно подключить сам jQuery, перед скриптом, который мы добавили чуть выше. То есть порядок подключения должен быть таким:

Как и условились ранее, вызов окна будет происходить при клике на кнопку в шапке. Давайте обработаем это событие, предварительно объявив в файле "scripts.js", что весь код написанный в нем должен исполняться после загрузки страницы.

Инструменты разработчика можно открыть командой ctrl+shift+i, в некоторых браузерах клавишей f12 или через меню.

Теперь давайте добавим класс "modal_active" нашему модальному окну, а при клике на кнопку с крестиком удалим его.

Попробуйте, смотрится совсем не плохо.

Теперь давайте реализуем функционал, когда модальное окно закрывается при клике, вне области контента этого окна. Делается это довольно просто.

Проверяйте, все должно отлично работать.

Теперь давайте разберем небольшой нюанс. Когда у вас страница наполнится контентом, то неизбежно появится вертикальная прокрутка.

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

Делается это довольно просто. При вызове окна мы просто уберем у тега "body" возможность прокрути. А когда окно будет закрываться, вернем все все на место.

Можно пойти 2 путями: менять стили прямо в js или создать специальный класс для тега body, который и будем убирать прокрутку. Я, обычно, пользуюсь вторым способом.

Давайте в таблице создадим класс ".hidden" и пропишем ему "overflow", запрещающий прокрутку.

В скрипте, при открытии модального окна, запретим прокрутку у тега "body" путем добавления класса "hidden".

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

Если у вас разные кнопки вызывают разные модальные окна, то привязывайтесь не к классу окна, а к "id", который должен быть уникальным на странице. То есть если у модального окна , то и обращаться к нему можно так:

Если несколько кнопок вызывают одно и тоже окно, то можно перечислить их айди и классы так:

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

Узнать, как создать модальное окно с помощью CSS и JavaScript.

Создать модальное окно

Модаль - это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы:

Модальный заголовок

Модальный нижний колонтитул

Шаг 1) Добавить HTML:

Пример

Некоторый текст в модальном..

The Modal Part

with class="modal" is a container element for the modal and the div with class="modal-content" is where you put your modal content (headings, paragraphs, images, etc).

The element with class="close" should be used to close the modal.

Шаг 2) Добавить CSS:

Пример

/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
>

.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>

The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.

Добавить a black background color with opacity.

Set position to fixed; meaning it will move up and down the page when the user scrolls.

It is hidden by default, and should be shown with a click of a button (we'll cover this later).

The .modal-content class

This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).

We also set the width to 400px - this could be more or less, depending on screen size. We will cover this later.

The .close class

The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.

Шаг 3) Добавить JavaScript:

Пример

// Получить модальный
var modal = document.getElementById("myModal");

// Получить кнопку, которая открывает модальный
var btn = document.getElementById("myBtn");

// Получить элемент , который закрывает модальный
var span = document.getElementsByClassName("close")[0];

// Когда пользователь нажимает на кнопку, откройте модальный
btn.onclick = function() modal.style.display = "block";
>

// Когда пользователь нажимает на (x), закройте модальное окно
span.onclick = function() modal.style.display = "none";
>

// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = "none";
>
>

Добавить верхний и нижний колонтитулы

Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:

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

Базовый код модального окна

Читайте также: