Модальное окно что это: Использование модальных окон в пользовательских интерфейсах / Хабр

Есть хороший Сенча-как мобильное решение jQuery для уведомления и диалоговые окна подтверждения?

В моем приложении на основе шаблона MVP (пассивное представление) (. NET) я разделил окна сообщений на представление, чтобы при тестировании моего докладчика и модели мой тестовый код не был затронут…

По моему опыту, unhandled exception в приложении .NET может вызвать отображение диалогового окна, описывающего исключение и т. д. Есть ли способ полностью подавить такие диалоговые окна? Можно ли…

Я написал сценарий groovy для проблем клонирования на этапе перехода в Jira. Скрипт отлично работает в фоновом режиме и создает необходимую клонированную проблему. Я хочу, чтобы на экране появилось…

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

Считаются ли диалоговые окна браузера доступными по стандартам WCAG A/AA? Диалоговые окна, на которые я ссылаюсь, являются родными для браузера, например, следующие в Chrome:

Иногда модальные диалоги в Prism 6 для WPF ведут себя как немодальные. Например, если модальный диалог находится над его родительским окном, и я нажимаю на поверхность родителя (рядом с границей…

Я пытаюсь вложить диалоговые окна, и это легко работает с одним уровнем вложенности, но второй уровень breaks-самый внутренний диалог не получает событий. [IDD_NESTEDDLG_DIALOG] | +— [IDD_CHILD1]…

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

Как закрыть все модальные диалоги? У меня есть приложение, которое использует много модальных диалогов (нижние листы, которые являются модальными). Многие могут быть открыты одновременно. Команда:…

Вы не знаете как должны работать модальные окна

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?

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

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

Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

Определение модального окна

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

Теги и атрибуты

Интерактивным элементом для открытия диалогового окна должна выступать кнопка. Не <div>, не <span> не <a>, не любой другой тег. Исключительно <button>. И касается не только диалоговых окон, <button> — самый надежный и доступный способ создавать интерактивные элементы на странице.

Простейшая реализация кнопки открывающая диалог по его id:

<button data-modal="dialogId">
    Открыть
</button>

Для различных диалогов, уведомлений и прочих перекрывающих документ элементов существует тег <dialog>. Его вы и должны использовать. К огромному сожалению, его поддержка не самая лучшая:

• Chromium — полная поддержка.
• Firefox — поддержка за флагом.
• Safari не поддерживает вовсе.

Так что для этих браузеров нужно подгружать polyfill:

if (!document.createElement('dialog').showModal) {
  // Браузер нативно не поддерживает элемент dialog

  import('/dist/dialog-polyfill.js') // Подгружаем polyfill
    .then(dialogPolyfill =>
      document. querySelectorAll('dialog')
        .forEach(dialogPolyfill.registerDialog) // Применяем его для всех элементов на странице
    )
}

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

<section role="dialog" aria-modal="true">
...
</section>

но тогда вам придётся самостоятельно реализовывать всё поведение описанное далее. В то время как с <dialog> большую часть браузер реализует из коробки.

Внешний вид и содержание

Вскользь коснусь внешнего вида.

На небольших экранах диалоговое окно должно занимать 100% его размера. Если ваш диалог будет большим:

1. Его будет легче «нащупать». Дело в том, что пользователь может взаимодействовать со страницей следующим образом: он водит пальцем по дисплею, а программа чтения с экрана озвучивает то, что в данный момент находится под пальцем.
2. Пользователю гарантированно не будут озвучиваться элементы «под ним». Иначе, например, VoiceOver на iPad может озвучивать отдельные фрагменты страницы под модальным окном даже «сквозь» оверлей блокирующий доступ указателю.
3. Вы скроете прокрутку фона на некоторых устройствах при прокрутке контента в диалоговом окне.
4. Удобнее для одной руки. Если окно растянуто на всю высоту – то у вас есть возможность прижать кнопки управления к нижней части дисплея. Туда намного проще дотянуться одной рукой пользователям современных смартфонов.
5. Больше места для контента на устройствах с маленьким экраном, таких как iPhone SE.

Заголовок обязателен

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

Настоятельно рекомендуется использовать для заголовка тег <h2>-<h6>.

Но просто добавить заголовок в диалоговое окно недостаточно. Их нужно ещё и логически «связать». Сделать это можно с помощью атрибута aria-labelledby следующим образом:

<dialog aria-labeledby="subscribe-header">
  <h3>Предложение подписки</h3>
</dialog>

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

Статический контент должен быть связан с окном

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

Делается это атрибутом aria-describedby:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Предложение подписки</h3>
    <p>
        Вы можете подписаться на нашу еженедельную рассылку.
        В ней представлены только лучшие публикации. 
    </p>
</dialog>

Если в вашем диалоговом окне много контента, тогда стоит обернуть его в один <div> и связать элемент диалога уже с ним:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Условия подписки</h3>

    <div>
        <p>Ниже представлены условия нашей подписки.</p>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
        ...Много контента
    </div>
</dialog>

Важно! Заголовок и любые кнопки не относящиеся к содержимому, а служащие для управления диалоговым окном, не должны быть включены в элемент на который указывает aria-describedby. Они должны быть вынесены отдельно:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Условия подписки</h3>

    <div>
        <p>Ниже представлены условия нашей подписки. </p>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
        ...Много контента
    </div>

    <div>
        <button>Принять</button>
        <button>Отказаться и закрыть</button>
    </div>
</dialog>

Интерактивные элементы связывать не нужно

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

<dialog aria-labeledby="subscribe-header">
    <h3>Данные для подписки</h3>

    <form>
        <label>
            Введите ваш email
            <input type="email">
        </label>
    </form>

    <div>
        <button>Подписаться</button>
        <button>Отказаться и закрыть</button>
    </div>
</dialog>

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

Если скомбинировать и статический текст и форму:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Подпишитесь на рассылку</h3>

    <p>
        Вы можете подписаться на нашу еженедельную рассылку.
    </p>

    <form>
        <label>
            Введите ваш email
            <input type="email">
        </label>
    </form>

    <div>
        <button>Подписаться</button>
        <button>Отказаться и закрыть</button>
    </div>
</dialog>

Способы закрыть окно

Внутри диалогового окна обязана быть кнопка чтобы его закрыть. Не <div>, не <span> не <a>, не любой другой тег. Исключительно <button>. Это самый надежный способ гарантировать, что любой пользователь сможет закрыть диалоговое окно. Вы же не любите модальные окна которые невозможно закрыть?

Дополнительно, в зависимости от вашей логики, вы можете позволить пользователю закрыть диалог кликнув за его пределами или нажав Escape (встроено в <dialog> из коробки).

Но:

1. Не рассчитывайте, что пользовать всегда может нажать на оверлей и так закрыть диалог.
   
   1. Как я писал ранее, во многих случаях диалоговое окно может занимать всю или большую часть экрана. Таким образом попасть в него может быть сложно или невозможно.
   2. Такой оверлей семантически не считается интерактивным элементом. Он не может быть в фокусе и на него невозможно «нажать» клавишами.
2. Не рассчитывайте, что у пользователя под рукой есть клавиатура, чтобы нажать Escape.
3. Существует множество устройств, программ и различных инструментов, способных читать веб-сайты и давать пользователю взаимодействовать с ними, но не так как в браузере. Во многих случаях единственным рабочим вариантом остаётся кнопка внутри.

Простейшая реализация кнопки закрывающей родительский диалог:

<button>
Закрыть
</button>

А если вы делаете кнопку с иконкой, то не забывайте про подпись, чтобы передать ёё назначение:

<button aria-label="Закрыть">
 ×
</button>

Поведение фокуса

При открытии диалога

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

В общем случае фокус перемещается на первый интерактивный элемент. Именно так ведет себя нативный <dialog> в браузере. Но нельзя делать сам элемент окна фокусируемым и перемещать фокус на него.

Например, для диалога с формой первый интерактивный элемент это первый <input>. Если ваше диалоговое окно носит чисто информативный характер, например, уведомление об успешной подписке, тогда первым и единственным элементом будет кнопка закрывающая диалог.

Но есть и несколько исключений:

1. Запрос подтверждения чего-либо. Если ваш диалог запрашивает у пользователя подтверждения перед выполнением каких-то необратимых действий (удаление чего-то или выполнение финансовых операций), тогда фокус автоматически должен ставится на кнопку «отмены» этих действий, независимо от её расположения.
2. Ситуации, когда в диалоговом окне много статического контента и первый интерактивный элемент не помещается в видимую область. Проблема тут в том, что в таком случае браузер автоматически проскролит вниз к кнопке в фокусе. Это вынудит пользователя скролить обратно вверх, а потом снова вниз. Для таких случаев есть два подхода:
   
   1. Переместить или продублировать интерактивные элементы так, чтобы первый из них был в видимой части экрана. Например, выполнить кнопку закрыть в виде крестика и закрепить в верхней части диалогового окна.
   2. Заголовок или первый абзац текста нужно сделать фокусируемым при помощи tabindex="-1" и перемещать фокус на него. Но при этом подходе некоторые программы чтения с экрана могут озвучивать заданный текст дважды: сначала как заголовок и описание окна, а потом как содержание выделенного элемента.

Управлять куда именно попадёт фокус при открытии модального окна можно с помощью атрибута autofocus:

<dialog aria-labeledby="subscribe-header">
    <h3>Необратимые действия</h3>

    <form>
        <label>
            Введите пароль для подтверждения
            <input type="password">
        </label>
    </form>

    <div>
        <button>Подтверждаю</button>
        <button autofocus>Отказаться и закрыть</button> <!-- Будет выбрана эта кнопка -->
    </div>
</dialog>

Внутри диалога

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

Чтобы блокировать указатель обычно документ накрывается полупрозрачным блоком.

Но этого недостаточно, так как остаётся ещё и навигация клавишами Tab / Shift + Tab. Также это могут быть клавиши громкости на смартфонах или специальные клавиши на дополнительных инструментах подключенных по USB/Bluetooth. Этот способ навигации тоже должен быть заблокирован.

После попадания фокуса в модальное окно пользователь может перебирать интерактивные элементы внутри этого окна, но не должен выходить за его пределы. Другими словами, такое диалоговое окно работает как ловушка для фокуса. Это поведение встроено в <dialog>, так что от вас никаких действий не требуется. А вот используя другой элемент с role="dialog" его нужно реализовывать самостоятельно средствами JavaScript.

При закрытии диалога

При закрытии диалогового окна фокус должен быть перемещён туда, где он был в момент открытия. Это поведение не является частью <dialog> и браузер полностью оставляет это на усмотрение разработчика.

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

Пример

Предлагаю разобрать на примере. Представим систему из трех диалоговых окон:

1. Сообщает пользователю об наличии подписки. В нем две кнопки: «Условия подписки» и «Подписаться»
2. Отображается по клику на «Условия подписки». Открывается поверх первого.
3. Отображается по клику на «Подписаться». Заменяет собой первое.

В примерах ниже я специально пропустил дополнительные атрибуты и элементы, для упрощения кода.

Итак, у нас есть стартовая кнопка.

<button>Рассылка</button> <!-- in focus -->

По нажатию на неё открывается первый диалог. Фокус автоматически перемещается на первый интерактивный элемент. А закрытие диалога должно возвращать фокус назад.

┌►<button>Рассылка</button>
│
└─  <dialog open>
        <button>Подписаться</button> <!-- in focus -->
        <button>Условия подписки</button>
    </dialog>

Далее пользователь перемещает фокус на «Условия подписки» и нажимает. Открывается второй диалог поверх первого. Фокус перемещается в него, а возвращаться должен на эту же кнопку в первом диалоге:

┌►<button>Рассылка</button>
│
└─  <dialog open>
        <h3>Рассылка</h3>

        <button>Подписаться</button>
┌────►  <button>Условия подписки</button>
│   </dialog>
│
└─  <dialog open>
        <h3>Условия подписки</h3>

        <button>Ок</button> <!-- in focus -->
    </dialog>

После закрытия второго диалога ваш JavaScript должен вернуть фокус на кнопку «Условия подписки» в первом.

┌►<button>Рассылка</button>
│
└─  <dialog open>
        <button>Подписаться</button> 
        <button>Условия подписки</button> <!-- in focus -->
    </dialog>

После чего пользователь нажимает кнопку «Подписаться». По условиям нашей задачи открывается третий диалог. Фокус автоматически перемещается в него. А первый диалог закрывается:

┌►<button>Рассылка</button>
│
└─  <dialog>
        <h3>Рассылка</h3>

┌────×  <button>Подписаться</button>
│       <button>Условия подписки</button>
│   </dialog>
│
│   <dialog>
│       <h3>Условия подписки</h3>
│
│       <button>Ок</button>
│   </dialog>
│
└─  <dialog open>
        <h3>Введите email</h3>

        <button>Подтвердить</button> <!-- in focus -->
    </dialog>

И вот проблема: третье окно должно вернуть фокус на кнопку в первом, но первое окно больше не доступно. В таких случаях фокус нужно вернуть туда, куда указывал закрытый диалог — на кнопку «Рассылка» с которой пользовать начал.

┌►<button>Рассылка</button>
│
│   <dialog>
│       <h3>Рассылка</h3>
│
│       <button>Подписаться</button>
│       <button>Условия подписки</button>
│   </dialog>
│
│   <dialog>
│       <h3>Условия подписки</h3>
│
│       <button>Ок</button>
│   </dialog>
│
└─  <dialog open>
        <h3>Введите email</h3>

        <button>Подтвердить</button> <!-- in focus -->
    </dialog>

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

Помните, как во время установки программы в Windows можно просто нажимать Enter? Так вот это пример хорошей работы с фокусом: каждый раз, при переходе на новый экран в фокус ставится элемент, с которым вы скорее всего будете взаимодействовать — кнопка «Далее» или «Обзор».

Подводя итог

1. Используйте семантические теги <button> и <dialog>.
2. Делайте ваши окна достаточно большими.
3. В модальных окнах должен быть заголовок.
4. Заголовок и содержимое должны быть соответствующим образом связаны с элементом модального окна.
5. Убедитесь что в диалоге есть кнопка для закрытия окна.
6. Перемещайте фокус внутрь при открытии, не выпускайте его из модального окна и возвращайте туда, где он был после закрытия.

Дополнительные ссылки

• Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1.2
• HTML Living Standard
• Polyfill for the HTML dialog element
• Filament group Modal

Модальное окно

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

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

Вкладка «Основные»

• Заголовок — это поле для ввода отображаемого наименования окна. Настройку заголовка можно осуществить двумя способами: ввести его вручную или нажать на кнопку ссылки справа и указать контекстную переменную виджета или приложения типа Строка. Значение контекстной переменной будет задавать заголовок меню;

• Показывать боковую панель — позволяет настроить необходимость отображения боковой панели модального окна. Настройку опции можно осуществить двумя способами: установить флажок или нажать на кнопку ссылки справа и указать заранее созданную контекстную переменную виджета или приложения типа Выбор «да/нет». Значение контекстной переменной будет отвечать за отображение боковой панели;

• Размер* — позволяет настроить размер отображения модального окна;

• Показать окно — позволяет выбрать, будет ли окно скрыто по умолчанию или будет демонстрироваться при определенном действии. Вы можете настроить эту опцию двумя способами: установить флажок или нажать на кнопку ссылки справа и указать контекстную переменную виджета или приложения типа Выбор «да/нет», которая будет отвечать за демонстрацию окна;

Вкладка «События»

• Событие при закрытии окна — функция, которая позволяет вам добавить событие, которое будет происходить при закрытии модального окна.

Подробнее о контекстных переменных читайте в статье Типы контекста.

Вкладка «Системные»

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

Для завершения настройки виджета нажмите на кнопку Сохранить, а затем Опубликовать.

Пример

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

Модальное окно · Bootstrap на русском

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

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

<div>
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5>Modal title</h5>
      </div>
      <div>
        <p>One fine body&hellip;</p>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div><!-- /.модальное окно-Содержание -->
  </div><!-- /.модальное окно-диалог -->
</div><!-- /.модальное окно -->

Демо

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

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Launch demo modal

<!-- Кнопка запуска модального окна -->
<button type="button" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Модальное окно -->
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5>Modal title</h5>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Сделать модальности можно

Не забудьте добавить role="dialog" и aria-labelledby="...", ссылаясь на модальное окно Заголовок, чтобы .modal, и role="document" к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal.

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog. Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.

Large modal Small modal

<!-- Большие модальное окно -->
<button data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Небольшой модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

Удалить анимацию

Для модальности, которые просто появляются, а не исчезают, просмотреть, удалить .fade класс от модальное окно разметки.

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

С помощью блочной системы

Чтобы воспользоваться преимуществами Bootstrap блочная система в модальное окно, просто гнездо .container-fluid В .modal-body, а затем использовать обычные блочная система классов внутри этого контейнера.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-2 .col-md-offset-4

.col-md-6 .col-md-offset-3

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

Launch demo modal

<div tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5>Modal title</h5>
      </div>
      <div>
        <div>
          <div>
            <div>.col-md-4</div>
            <div>.col-md-4 .col-md-offset-4</div>
          </div>
          <div>
            <div>.col-md-3 .col-md-offset-3</div>
            <div>.col-md-2 .col-md-offset-4</div>
          </div>
          <div>
            <div>.col-md-6 .col-md-offset-3</div>
          </div>
          <div>
            <div>
              Level 1: .col-sm-9
              <div>
                <div>
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div>
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div>
  <button type="button" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
  </button>
</div>

Изменения модальное окно Контента, основанного на кнопку пуска

Есть куча кнопок, вызывает модальное окно, просто с немного разным содержанием? Используйте event.relatedTarget и HTML data-* атрибуты (возможно через jQuery) варьировать содержимым модального окна в зависимости от того, какая кнопка была нажата. См подробные сведения в документации Модальных событий relatedTarget.

<div>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div role="document">
      <div>
        <div>
          <button type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5>New message</h5>
        </div>
        <div>
          <form>
            <div>
              <label for="recipient-name">Recipient:</label>
              <input type="text">
            </div>
            <div>
              <label for="message-text">Message:</label>
              <textarea></textarea>
            </div>
          </form>
        </div>
        <div>
          <button type="button" data-dismiss="modal">Close</button>
          <button type="button">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Кнопка, что спровоцировало модальное окно
  var recipient = button.data('whatever') // Извлечение информации из данных-* атрибутов
  // Если необходимо, вы могли бы начать здесь AJAX-запрос (и выполните обновление в обратного вызова).
  // Обновление модальное окно Контента. Мы будем использовать jQuery здесь, но вместо него можно использовать привязки данных библиотеки или других методов.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Модальные окна с динамической высоты

Если Высота модальное окно изменения во время ее открытия, Вам необходимо позвонить $('#myModal').data('bs.modal').handleUpdate() подрегулировать модальное окно’s позиции в случае появляется полоса прокрутки.

Использование

В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или JavaScript. Он также добавляет .modal-open на <body> по умолчанию прокрутка поведение и создает .modal-backdrop, чтобы обеспечить щелкните область для увольнения показаны модальные глаголы при нажатии вне модальное окно.

С помощью данных атрибутов

Активируйте модальное окно без записи JavaScript. Набор data-toggle="modal" на элемент контроллера, кнопки, вместе с data-target="#foo" или href="#foo", чтобы предназначаться для определенного модальное окно для переключения.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызов модальное окно с кодом myModal С одной строки JavaScript:

$('#myModal').modal(options)

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-backdrop="".

Методы

Активирует ваш Контент в модальное окно. Принимает необязательный варианты object.

$('#myModal').modal({
  keyboard: false
})

Переключение вручную на модальное окно. Возвращает абоненту до модальное окно фактически было показано или скрыто (т. е. shown.bs.modal или hidden.bs.modal события).

$('#myModal').modal('toggle')

Вручную открывает модальное окно. Возвращает абоненту до модальное окно фактически было показано (т. е. shown.bs.modal события).

$('#myModal').modal('show')

Вручную скрывает модальное окно. Возвращает абоненту до модальное окно На самом деле был скрытым (т. е. hidden.bs.modal события).

$('#myModal').modal('hide')

События

Bootstrap модальное окно класс предоставляет несколько событий для навески модальное окно функциональности. Все модальное окно события обстреляли модальное окно сама по себе (т. е. <div>).

$('#myModal').on('hidden.bs.modal', function (e) {
  // сделать что-то...
})

Что такое модальное окно и когда его использовать?

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

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

На практике все зависит от того, хорошо ли спроектировано модальное окно и имеет ли он смысл. Если все сделано правильно, они могут быть полезными как для ваших пользователей, так и для ваших чисел: согласно недавнему исследованию почти 2 миллиардов модальных всплывающих окон, 10% лучших исполнителей конвертируются с поразительной скоростью — 9.28%.

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

Что такое модальное окно?

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

Назначение модальных окон можно описать одним словом: фокус. Если вам нужно, чтобы посетители сосредоточились на чем-то простом, модальное окно — одно из наиболее эффективных средств для этого. Пользователи должны либо закрыть модальное окно, либо выполнить в нем определенное действие (например, прочитать сообщение и щелкнуть «ОК», заполнить форму и т. Д.).

Вот простой пример от жителя Нью-Йорка.Это модальное окно предлагает нам подписаться на их информационный бюллетень.

Источник изображения

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

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

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

Модальное и немодальное

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

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

Когда модальные окна используются в веб-дизайне?

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

Предупреждения, предупреждения и подтверждения

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

Источник изображения

Используйте модальные окна только для наиболее важных сообщений.Например, ошибки, которые активно препятствуют выполнению желаемого действия (например, «Мы не смогли выполнить ваш запрос из-за ошибки сервера. Обновите страницу и попробуйте еще раз») и действия, которые нельзя отменить (например, «Выполнены вы уверены, что хотите продолжить? ») являются вескими причинами для модального окна. Предупреждение о «политике файлов cookie», не так много — сохраните это для немодального окна или панели уведомлений.

Формы

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

Многие веб-сайты, такие как Boston Globe, ограничивают свой контент только участниками, и об этом можно сообщить не членам через модальное окно:

Источник изображения

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

Медиа-дисплеи

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

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

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

Источник изображения

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

Многоступенчатые процессы

Для более длительных и энергоемких действий на вашем веб-сайте — создания профиля пользователя, подписки на услугу или завершения настройки инструмента — рассмотрите возможность разделения каждого шага в собственное модальное окно, чтобы удобство было более управляемым. Этот метод часто используется в программных приложениях в виде «мастера» или «руководства для установщика». Прогресс должен отображаться в окне в виде полосы, последовательности маленьких точек, чисел или какого-либо другого индикатора.

Pinterest хорошо справляется с этим с процессом создания учетной записи.Обратите внимание на индикатор прогресса вверху.

Источник изображения

Оптимальные методы работы с модальным окном

1. Используйте модальные окна намеренно и нечасто.
2. Отключить все элементы фона.
3. Напишите четкие инструкции и текст кнопки.
4. Дайте пользователям выход.
5. Правильно установите размер модального окна.
6. Ввести и закрыть модальное окно с плавным переходом.
7. Ограничение модальных окон на мобильных устройствах.
8. Сделайте ваши модальные окна доступными.

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

1. Используйте модальные окна намеренно и нечасто.

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

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

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

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

2. Отключить все элементы фона.

Чтобы эффективно привлечь все внимание к модальному окну, все фоновые элементы должны быть визуально и функционально убраны за дочерним окном.

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

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

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

3. Напишите четкие инструкции и текст кнопки.

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

4. Дайте пользователям выход.

Каждое хорошее модальное окно позволяет по крайней мере одно действие, возможность закрыть его. Соглашение гласит, что окно должно открываться после того, как пользователь нажмет клавишу выхода или щелкнет символ «X» или текст «Закрыть» в верхнем левом или правом углу модального окна.

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

5.Подберите размер модального окна.

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

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

6. Введите и закройте модальное окно с постепенным переходом.

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

Вернемся к нашему примеру со звездой, обратите внимание, как модальное видео быстро, но плавно исчезает из поля зрения, а фоновое содержимое затемняется:

Источник изображения

7. Ограничьте модальные окна на мобильном телефоне.

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

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

8. Сделайте ваши модальные окна доступными.

Я уже затронул пару указателей веб-доступности в этом списке — вот несколько распространенных методов, позволяющих сделать ваши модальные окна доступными для всех:

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

Как реализовать моды в CSS

Чтобы добавить базовое модальное окно на ваш сайт, можно использовать только CSS и HTML.Большинство факторов дизайна, которые мы рассмотрели в этом руководстве, можно изменить с помощью ноу-хау CSS. W3Schools предоставляет простой, но полезный шаблон кода для начала работы с методом CSS, или вы можете использовать бесплатный шаблон из Free Frontend или Material Design для Bootstrap.

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

— единственная концепция пользовательского интерфейса, которую не полностью понимают большинство дизайнеров | Фабиан Себастьян

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

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

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

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

Apple не была бы Apple, если бы она время от времени не нарушала свои собственные правила: например, новый App Store открывает основные моменты на вкладке «Сегодня» в виде модального экрана, но по-прежнему позволяет пользователям переходить к следующему рекомендации внизу модального экрана (нет четкой конечной точки). Таким образом, пользователи могут глубже перемещаться по модальному экрану, не имея фиксированной конечной точки. В процессе они теряют возможность изменять вкладки и больше не могут закрывать модальное представление на подстраницах. Открытие того же экрана приложения из чего-то другого, кроме рекомендации, приводит к тому, что экран отображается как немодальный экран.Это сохраняет панель вкладок и обратные действия (щелкните значок текущей панели вкладок еще раз, чтобы перейти на ее главный экран).

Модальные окна: все, что вам нужно знать

Любите ли вы их, ненавидите или просто игнорируете, модальное окно — полезный инструмент. Это помогает привлечь внимание пользователей, стимулировать участие пользователей и предоставить им актуальную и конкретную информацию.

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

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

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

Это действие может быть, но не ограничивается:

• Закрытие нескольких вкладок в браузере
• Выход из приложения без сохранения
• Делает что-то необратимое, например: « Вы уверены, что хотите навсегда удалить эти 5 элементов?»

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

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

• Привлечение внимания пользователя

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

Хотя Раймонд Чен писал, что это проблема, потому что многие люди боятся диалогового окна. Люди боятся отвечать на вопрос, если ответят неправильно. Большинство людей по привычке нажимают «Отмена».

• Получение информации от пользователей

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

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

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

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

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

Изображение предоставлено: Анна

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

Предварительно определите ваше модальное окно

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

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

Экономно используйте модальные окна

В идеале вы хотите свести использование модального окна к минимуму. Тереза ​​Фессенден пишет, что модальные окна могут заставить пользователей забыть, что они делали.

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

Адаптивное проектирование модальных окон

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

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

Согласно исследованию, проведенному Стивеном Хубером, 75% людей полагаются на свой большой палец, а 49% людей полагаются на хват одной рукой, чтобы выполнять работу на своем мобильном телефоне.

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

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

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

Обеспечить визуальную согласованность

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

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

Избегайте использования модального окна для всплывающих окон списка рассылки

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

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

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

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

Большой, жирный UX — использование модальных окон для взаимодействия с пользователем в приложении

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

Конечно можно.К сожалению, такое плохое UX-поведение — обычное дело.

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

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

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

Что такое модальное окно?

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

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

Преимущества и варианты использования модальных окон

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

Вот некоторые распространенные варианты использования:

1. Подключение пользователей

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

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

2. Анонсы функций

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

3. Дополнительный ввод данных пользователем

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

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

Недостатки

Модальные окна по своей сути разрушительны.

Для небольших объявлений придерживайтесь более тонких шаблонов пользовательского интерфейса. Выдвижные окна и баннеры часто более подходят для предоставления мгновенной обратной связи или обычных объявлений (как это делает Datadog в приведенном ниже примере).

Для контекстных сообщений, которые относятся к определенным элементам или функциям страницы (как в примере из HubSpot ниже), подсказки часто являются лучшим выбором.

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

Вы можете прочитать все о маленькой, но мощной подсказке здесь.

Советы по созданию отличного модального дизайна

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

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

💯 Заголовок

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

• Для модальных окон адаптации пользователей начните с повторения «Добро пожаловать в {ваш продукт}» или «Добро пожаловать, {имя}».
• В объявлениях о функциях используйте такие слова, как «Представляем» или «Новое», чтобы привлечь внимание пользователя.
• Модальные окна подтверждения должны четко повторять предполагаемое действие. Например: «Удалить фото?»

🖼 Графика

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

📝 Основной текст

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

🏃 Кнопка призыва к действию

Яркий, ориентированный на действия язык лучше всего подходит для CTA. Призывы к действию могут быть интригующими, но не слишком загадочными.Лучшие из них убедительно намекают на то, что будет дальше.

Для вдохновения прочтите, какие сильные слова находят отклик у пользователей.

🙅 Выходы

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

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

⏳ Индикаторы выполнения

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

Взгляните на модальное окно Календаря Google ниже. Здесь нет индикатора выполнения, поскольку это один шаг, но присутствуют все остальные компоненты хорошего модального окна: описательный заголовок, фирменная графика, информативный основной текст и возможность выйти с действием или без него.

Использование модальных окон для мобильных приложений

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

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

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

Permission Priming — еще один распространенный вариант использования модальных окон на мобильных устройствах:

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

Сохранить модальные окна для впечатляющего обмена сообщениями

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

Если вы хотите создавать и экспериментировать с модальными окнами, которые выглядят нативно для вашего приложения (и не требуют программирования или помощи разработчика для начала работы), попробуйте Appcues !

Модальное или нет. Модальные окна популярны не зря… | Аллен Ким | Digital-Heart

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

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

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

Модальное диалоговое окно требует внимания и доступности

Модальное диалоговое окно должно занимать 100% экрана, полностью закрывая фоновое окно, также скрывая движение фона при прокрутке согласно W3C.

Модальное диалоговое окно должно быть настраиваемым и доступным, а доступные описания устанавливаются на основе содержимого каждого диалогового окна. Используйте role = "dialog" , aria-modal , aria-hidden соответственно для каждого модального окна.

Критика

Состояние модального окна, открытого на странице, не может быть представлено URL-адресом. Пользователи не могут посещать страницу с открытым модальным окном без дополнительного программирования.

НЕ используйте модальное окно, если пользователям необходимо перейти в модальное состояние по URL-адресу.

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

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

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

Немодальные диалоговые окна , которые остаются на экране и доступны для использования в любое время, но разрешают другие действия пользователя. Немодальный диалог должен использоваться только для информационного отображения или вспомогательной работы (диалог утилиты / палитры), который не является игнорируемым. Если это требует внимания пользователя, нельзя использовать немодальный диалог.

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

Как насчет всплывающего окна внутри всплывающего окна?

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

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

• Модальное окно должно иметь описательный заголовок
• Модальное окно должно иметь кнопку Отмена / Закрыть
• Клавиша Escape должна закрывать окно
• Закрыть при нажатии за пределами модального окна
• Добавьте тень и прозрачный фон
• Не создавайте модальное окно с слишком большим количеством содержимого. Это сбивает с толку.

Ссылки:

Далее я только собрал причины, по которым нам следует избегать модальных окон; https://medium.com/@allenhwkim/why-not-modal-84d9f5d7c646

Что такое модальный веб-дизайн

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

Все, что вам нужно знать о модальных окнах.

Что такое модальные окна?

Термин «модальное окно» относится к любому всплывающему окну, которое прерывает действие, которое вы пытаетесь завершить.

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

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

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

Неправильный способ использования модальных окон.

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

1. Они могут расстроить пользователей.

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

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

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

3. Они могут запутать пользователей.

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

По теме: что такое лайтбокс?

Как правильно использовать модальные окна.

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

1. Привлечение внимания пользователя.

Привлечение внимания к тому факту, что пользователь запросил выполнение действия, которое не имеет смысла, — отличный способ использовать модальные окна.Кто случайно не закрыл браузер с товаром, который мы ДЕЙСТВИТЕЛЬНО хотели продать, или не закрыл программу, в которой было много часов несохраненной работы? Модальные окна можно использовать для привлечения внимания к действиям, которые кажутся нелогичными из-за действий пользователя.

Бонус: как JavaScript используется в веб-дизайне

2. Получение информации от пользователей.

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

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

3. Упрощение взаимодействия с пользователем.

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

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

Последнее слово.

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

–

Thrive Design — это клиентоориентированное агентство веб-дизайна и маркетинга из Сиэтла. Свяжитесь с нами сегодня, чтобы узнать, как мы можем улучшить ваш бизнес в Интернете! Найдите нас в Clutch, UpCity, LinkedIn, Facebook и Twitter.

Категория: Веб-дизайн Сиэтл

Модальные окна | AcceDe Web

Сводка

Принцип

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

Модальные окна контролируют текущую страницу, пока они отображаются на экране.

Базовый HTML-код

Модальное окно

  

   Закрыть 
   
 [Модальный заголовок] 
 
  [Модальное содержание]
  

Модальное окно

  

    Закрыть 
   [Модальное содержание]
 
  

Роли, состояния и свойства ARIA

• role = "dialog" должен быть применен к контейнеру в модальном окне
• aria-modal = "true" необходимо применить к контейнеру в модальном окне
• Если заголовок модального окна отображается на экране, он должен быть прикреплен к модальному окну с помощью атрибута aria-labelledby :
  • Заголовок модального окна должен иметь атрибут id с уникальным значением.
  • Контейнер модального окна должен иметь атрибут aria-labelledby со значением атрибута id заголовка модального окна.
• Если заголовок модального окна не отображается на экране, необходимо применить aria-label и предоставить его в контейнере модального окна.

Взаимодействие с клавиатурой

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

Эта комбинация клавиш действует так же, как клавиша Tab , но в обратном порядке. Если при нажатии комбинации клавиш фокус клавиатуры находится на первом интерактивном элементе в модальном окне, фокус перемещается на последний интерактивный элемент в модальном окне.

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

Ожидаемое поведение

Когда отображается модальное окно (открыто)

• Фокус клавиатуры динамически помещается на первый интерактивный элемент, содержащийся в модальном окне.
• Фокус клавиатуры должен быть ограничен модальным окном, а табуляция должна быть невозможна на остальной части страницы (под модальным окном).Модальное окно можно закрыть с помощью клавиши Esc .

Когда модальное окно скрыто (закрыто)

• Фокус клавиатуры необходимо переместить на элемент, открывший проем модального окна.
• В идеале модальное окно должно быть удалено из DOM. Однако, если модальное окно остается в исходном коде, к его контейнеру необходимо применить display: none или visibility: hidden .

Компоненты

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