en.javascript.info/02-ui/04-forms-controls/04-forms-submit/01-modal-dialog/task.md
Ilya Kantor f301cb744d init
2014-10-26 22:10:13 +03:00

3 KiB
Raw Blame History

Модальное диалоговое окно

[importance 5]

Создайте функцию showPrompt(text, callback), которая выводит форму для ввода с сообщением text и кнопками ОК/Отмена.

  • При отправке формы (OK/ввод в текстовом поле) -- должна вызываться функция `callback` со значением поля.
  • При нажатии на `Отмена` или на клавишу [key Esc] -- должна вызываться функция `callback(null)`. Клавиша [key Esc] должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.

Особенности реализации:

  • Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!).
  • Текст может состоять из нескольких строк, возможен любой HTML
  • При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно -- *модальное*.
  • При показе формы -- сразу фокус на `INPUT` для ввода.
  • Нажатия [key Tab]/[key Shift+Tab] переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.

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

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

Открыть в новом окне: (нажмите там на кнопку) tutorial/form/prompt/index.html.

Разбейте решение на этапы:

  1. Создайте HTML/CSS для формы.
  2. Расположите форму в центре при помощи CSS (можно отцентрировать и через JavaScript, но тогда нужно будет при изменении размеров окна пересчитывать координаты формы, так что CSS лучше). Имейте в виду, что её размер по вертикали неизвестен, так как зависит от количества текста.
  3. Решите задачу: как сделать форму модальной, чтобы посетитель не мог нажать на другое место страницы или через [key Tab] уйти с формы.
  4. Напишите общее решение с обработчиками.