вернуться к уроку

Модальное диалоговое окно с формой

важность: 5

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

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

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

Требования:

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

Пример использования:

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

Демо во фрейме:

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

Открыть песочницу для задачи.

Модальное окно может быть реализовано с помощью полупрозрачного <div id="cover-div">, который полностью перекрывает всё окно:

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}

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

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

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

Открыть решение в песочнице.