Модальное окно что это значит

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

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

Как это устроено

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

• Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , так что вместо этого прокручивается модальное содержимое.
• Клик по модальному «фону» автоматически закрывает модальный.
• Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
• В модальных окнах используется position: fixed , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
• Еще раз, из-за position: fixed есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для получения дополнительной информации.
• Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:

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

Примеры

Модальные компоненты

Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Источник

Модальные окна, которые мы заслужили

Начнем

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

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

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

Некоторые решения на просторах npm предлагают замену скролла отступом или блоком, который стилизован под скролл (простая серая полоска), много магии, но проблему они не исправляют.

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

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

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

Доступность

Если о ней не подумать, будет возможное перемещение с помощью таба вне модального окна. На gif только нажатие Tab несколько раз.

На просторах интернета нет простого решения этой проблемы, а писать свой костыль велосипед не очень рационально, когда есть библиотека focus-trap.js. Здесь автор более детально раскрыл тему библиотек и их проблем.

Итоги

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

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

Источник

Советы по созданию правильных модальных окон

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

Jul 12 · 5 min read

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

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

1. Не используйте модальные окна, чтобы выводить ошибки, состояние ожидания или сообщения об успешной попытке

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

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

Модальное окно в формате “ Загрузка…” является довольно распространённой практикой для уведомления о длительных операциях. Использование модальных окон в таких случаях можно считать логичным, поскольку такое окно не позволяет пользователю взаимодействовать с экраном. Однако можно найти и более подходящее решение — добавление на сайт строки загрузки прямо в кнопку, которая начинает действие. Такое решение будет сигнализировать о том, что нужно немного подождать, и не дает пользователю снова нажать на кнопку загрузки.

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

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

2. Осторожнее с модальными окнами, вызываемыми системой

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

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

Дизайнеры обычно используют такие окна в рекламных целях. Такие окна прерывают пользователя и заставляют его выполнить какое-либо определенное действие. “Незваные” окна часто производят плохое впечатление на пользователей — люди инстинктивно ищут кнопку “закрыть”. Такие окна считаются раздражающими и неуместными.

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

3. Убедитесь, что пользователи понимают, что от них требуется

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

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

К примеру, если пользователь хочет удалить свои файлы, то вместо того, чтобы спрашивать “ Очистить хранилище?” с ответами “ Да” или “ Нет”, лучше спросить “ Вы точно хотите удалить свои файлы?” с вариантами “ Удалить” и “ Отмена”.

4. Выносите содержимое сайта и его активные кнопки в модальные окна

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

• В идеале, модальное окно должно содержать пару-тройку предложений, а также не более двух кнопок действия.
• Третье действие, например кнопка “ Узнать больше”, лишь уводит пользователя от основного окна и не дает ему завершить желаемое действие.

5. Делайте кнопки закрытия окна видимыми

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

• Добавить заметную кнопку “Закрыть” или “×” в правом верхнем углу окна.
• Добавить заметную кнопку “Закрыть” или “Отменить” в нижней части окна.
• Добавить возможность закрытия модального окна при клике за его пределами.

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

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

7. Выделяйте модальные окна

Вот как можно дать пользователям понять, что перед ними модальное окно:

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

8. Сделайте содержимое модального окна доступным для пользователей с клавиатурой (для ПК)

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

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

9. Не используйте вложенные модальные окна

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

Источник

The Modal — правильные модальные окна

Очень часто модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Что же такое «правильно»?

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

1. Пользователю нельзя позволять прокручивать страницу под ним.
2. При этом, если содержимого в модальном окне очень много, нужно позволить прокручивать содержимое.

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

Ну а теперь немного про реализацию.

Идея достаточно проста. В открытом состоянии разметка получается примерно вот такая:

К ней применяется CSS:

Вот и всё. Остаётся завернуть в удобный для использования плагин jQuery и добавить плюшки вроде закрытия по ESC. У меня получился плагин вот с таким API:

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

• Скролл клавиатурой в FF скроллит страницу вместо модального окна.
• На iPad скролл работает не очень стабильно (иногда скроллит страницу).
• Скролл нажатием средней кнопки мыши работает неверно.
• Открытие модального окна сдвигает страницу в том случае, если появляется или убирается скролл.

Конструктивная критика и советы очень приветствуются.

Источник

Модальное окно для сайта на чистом CSS и JavaScript

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

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

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

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

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

Изображение модального окна:

Оно состоит из заголовка (хедера), основной части и футера.

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

Загрузка и установка модального окна

Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

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

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

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.

Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :

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

Все эти ключи являются не обязательными . Если не указать title , то заголовок будет иметь название «Новое окно» . Если не установить значению ключу content , то модальное окно в этом случае создатся с пустым содержимым.

Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.

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

Пример создания модального окна с настройками по умолчанию:

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal .

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

• show – для отображения модального окна;
• hide – для скрытия модального окна;
• destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
• setContent – для установки контента;
• setTitle – для установки заголовка.

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

Рассмотрим, как работать с этими методами на примерах.

Например, метод show используется когда вам необходимо показать (открыть) модальное окно:

Метод hide применяется для его скрытия:

Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

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

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

1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.

2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle=»modal» ):

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

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

5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:

6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:

Пример содержимого файла «json-1»:

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

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

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции $modal :

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

В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .

Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :

Переменные _eventShowModal и _eventHideModal применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта document . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах — false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.

Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

Источник