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

Создайте функцию showPrompt(html, callback) , которая выводит форму с сообщением ( html ), полем ввода и кнопками OK/ОТМЕНА .

Пользователь должен ввести что-то в текстовое поле и нажать Enter или кнопку «OK», после чего должна вызываться функция callback(value) со значением поля.
Если пользователь нажимает Esc или кнопку «ОТМЕНА», тогда вызывается callback(null) .

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

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

showPrompt("Введите что-нибудь
. умное :)", function(value) < alert(value); >);

P.S. HTML/CSS исходного кода к этой задаче содержит форму с фиксированным позиционированием, но вы должны сделать её модальной.

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

#cover-div

Так как он перекрывает вообще всё, все клики будут именно по этому .

Также возможно предотвратить прокрутку страницы, установив body.style.overflowY=’hidden’ .

Форма должна быть не внутри , а после него, чтобы она не унаследовала полупрозрачность ( opacity ).

Как сделать — Модальное окно

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

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

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

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

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

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

Пример

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

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

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

Пример

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

/* Модальное содержание/коробка */
.modal-content background-color: #fefefe;
margin: 15% auto; /* 15% сверху и по центру */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>

/* Кнопка закрытия */
.close color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
>

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

.modal class

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

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

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

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

The .modal-content class

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

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

The .close class

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

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

Пример

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

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

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

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

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

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

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

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

Пример

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

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

Какой-то другой текст.

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

Стиль модального заголовка, тела и нижнего колонтитула, а также добавить анимацию (слайд в модели):

Пример

/* Модальный заголовок */
.modal-header padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Модальное тело */
.modal-body

/* Модальный нижний колонтитул */
.modal-footer padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Модальное содержание */
.modal-content position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
>

Нижний модальный («нижние листы»)

Пример того, как создать модальный режим полной ширины, который скользит снизу:

Пример

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

Модальное окно или страница: схема принятия решений

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

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

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

Пример: Регистрационная форма сервиса AKIRA для владельцев корпоративного полиса медицинского страхования Manulife Financial. Что значит “номер страхового полиса Manulife”?

Вы в замешательстве. Как будет лучше поступить? Прервать сценарий? Добавить ещё одну страницу? Или модальное окно? Как принять верное решение?

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

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

Модальные окна помогают не потерять контекст

‍Однажды кого-то заинтересовал вопрос: «Как вывести на экран важную информацию, не потеряв контекст текущего экрана?» — бинго! Так и появились модальные окна.

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

Язык модальных окон

‍Кто-нибудь когда-нибудь задавался вопросом: «В чем разница между модальными, диалоговыми окнами и оверлеем? Часто их принимают за один и тот же элемент, или же считают различия между ними просто формальностью. Давайте все же определимся с терминами, прежде чем продолжить:

Диалоговое окно (Dialog): Диалог — разговор между двумя людьми. В пользовательском интерфейсе диалог — это «разговор» между системой и пользователем, который осуществляется посредством диалоговых окон.
Режим (Mode): Особое состояние системы, в котором одна и та же система имеет несколько разных пользовательских интерфейсов. Каждый режим может предлагать различные виды действий или одни и те же действия, но с разными результатами, которые зависят от режима работы системы.
Оверлей (Overlay): Окно с контентом, которое отображается поверх другой страницы. Оверлеи обычно заметны меньше, чем основная страница.
Затемнение/Осветление (Scrim/Lightbox): Временное затемнение, которое может быть применено к экрану, чтобы сделать контент менее заметным для создания эффекта лайтбокса (Lightbox), когда более светлый оверлей выделяется на темном фоне.
Модальное окно (Modal): Блокировка содержимого фоновой страницы во время взаимодействия пользователя с оверлеем.
Немодальное окно (Non-modal): Пользователи могут продолжать взаимодействовать с содержимым фоновой страницы (например, кликать на ссылки или нажимать кнопки), в то время как оверлей по-прежнему остается видимым.

Читать:

Как в ворде умножить числа в таблице

Типы модальных окон

‍Чтобы упростить нам жизнь, Nielsen Norman Group создала очень полезную диаграмму, которая помогает понять несколько важных различий:

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

‍Для того чтобы вам было еще проще, я нарисовал удобную диаграмму, которая объединяет все, о чем мы говорили выше ☝️, и актуальные компоненты из Material Design от Google.

Итог: моя схема принятия решений

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

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

Заключение

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

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

Ссылки

‍‍Popups: 10 Problematic Trends and Alternatives
‍https://www.nngroup.com/articles/modes/
‍https://www.nngroup.com/articles/modal-nonmodal-dialog/
‍https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1
‍https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

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

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

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

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

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

Вид модального окна, созданного с помощью JavaScript

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

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

Подключение CSS и JavaScript-файлов к странице

Исходные коды модального окна расположены на GitHub в рамках проекта ui-components в папке modal .

Для установки модального окна на страницу необходимо подключить к ней файлы:

CSS: modal.css ;
JavaScript: modal.js .

Создание и настройка модального окна

Этот скрипт создаёт модальное окно динамически. То есть здесь не нужно вставлять какой-то HTML-код непосредственно на страницу. Реализовано это в коде через класс. Шаблон модального окна содержится в приватном свойстве #template :

JavaScript

class ItcModal { #template = '{{title}}
×
{{content}}
{{footer}}
'; // . }

Следовательно, для того, чтобы сделать модальное окно достаточно просто создать новый экземпляр класса ItcModal :

JavaScript

const modal = new ItcModal();

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

JavaScript

const modal = new ItcModal({ title: 'Заголовок', content: 'Содержимое модального окна.
 ', footerButtons: [ { class: 'btn btn-close', text: 'Закрыть', action: 'close' }, ] });

Ключ title отвечает за заголовок, content – за содержимое, footerButtons – за кнопки в футере окна.

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

JavaScript

const modal = new ItcModal();

Пример создания модального окна с заголовком «Какой-то текст» и содержимым

Мой контент

:
JavaScript

const modal = new ItcModal({ title: 'Какой-то текст', content: 'Мой контент
' });

В качестве содержимого можно передавать HTML-код.

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

JavaScript

const modal = new ItcModal({ title: '. ', content: '.
 ', footerButtons: [ { class: 'btn btn-cancel', text: 'Отмена', action: 'cancel' }, { class: 'btn btn-ok', text: 'ОК', action: 'ok' } ] });

Методы

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

show – открытие;
hide – закрытие;
dispose – удаление из DOM HTML-элементов модального окна и обработчика события click ;
setBody – установка основного содержимого;
setTitle – изменение заголовка.

Открытие модального окна:

JavaScript

const modal = new ItcModal(); // открыть модальное окно modal.show();

Скрытие модального окна:

JavaScript

modal.hide();

Изменение заголовка и тела модального окна:

JavaScript

// новый заголовок modal.setTitle('Текст нового заголовка'); // новое тело modal.setBody('.
 ');

Уничтожение модального окна:

JavaScript

modal.dispose();

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

События

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

JavaScript

// при открытии модального окна document.addEventListener('show.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно e.target.querySelector('.itc-modal-body').innerHTML = 'Содержимое модального окна, добавленное через show.itc.modal. '; }); // при закрытии модального окна document.addEventListener('hide.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно e.target.querySelector('.itc-modal-body').innerHTML = ''; });

Примеры

1. Открытие модального окна при нажатии на кнопку:

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

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

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

5. Создание 2 разных модальных окон. Первое модальное окно открывается при нажатии на кнопки с data-атрибутом data-toggle=»modal-1″ , а второе – при клике на data-toggle=»modal-2″ :

6. Загрузка данных в модальное окно посредством AJAX:

из json-1 из json-2 .

{"title":"Audi A5 Coupé","price":"22500$","image":"https://itchief.ru/examples/images/car-1.jpg"}

7. Работа с событиями, возникающими при открытии и закрытии модального окна:

Внутреннее устройство модального окна

Код JavaScript модального окна представлен посредством класса ItcModal :

JavaScript

class ItcModal { #elem; #template = '{{title}}
×
{{content}}
{{footer}}
'; #templateFooter = '{{buttons}}
'; #templateBtn = ''; #eventShowModal = new Event('show.itc.modal'); #eventHideModal = new Event('hide.itc.modal'); #disposed = false; constructor(options = []) { // . } #handlerCloseModal(e) { // . } show() { // . } hide() { // . } dispose() { // . } setBody(html) { // . } setTitle(text) { // . } };

В конструкторе мы создаём DOM-элемент и формируем его HTML-структуру. Ссылку на созданный элемент мы помещаем в приватное свойство #elem . Данное свойство мы будем использовать в других методах ItcModal . Для вставки на страницу модального окна используется метод append .

Приватное свойство #disposed применяется для хранения состояния. По умолчанию оно имеет значение false . Это свойство связано с методом dispose() . При вызове этого метода, модальное окно удаляется со страницы. Но, кроме этого, также удаляется событие, связанное с ним. Для отметки этого действия, свойству #dispose присваивается значение true :

JavaScript

dispose() { this.#elem.remove(this.#elem); this.#elem.removeEventListener('click', this.#handlerCloseModal); this.#disposed = true; }

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

JavaScript

show() { if (this.#disposed) { // если модальное окно удалено, то завершаем работу return; } this.#elem.classList.add('itc-modal-show'); this.#elem.dispatchEvent(this.#eventShowModal); }

При открытии и закрытии модального окна, код генерирует события show.itc.modal и hide.itc.modal с помощью метода dispatchEvent . Сами события находятся в приватных свойствах #eventShowModal и #eventHideModal . Эти события вызываются для this.#elem . Используя их, вы можете очень просто добавить нужную логику при открытии и закрытии модального окна:

JavaScript

document.addEventListener('show.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно // . }); document.addEventListener('hide.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно // . });

Приватный метод #handlerCloseModal является обработчиком события click и используется для закрытия модального окна. То есть он выполняется при нажатии на крестик или при клике на backdrop . Это действие мы вынесли в отдельный метод для того, чтобы потом мы могли удалить его при вызове метода dispose .