en.javascript.info/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
Ilya Kantor 1f61c2ab1d ok
2017-03-15 00:43:43 +03:00

2 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 );
});

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

[iframe src="solution" height=160 border=1]

Исходный HTML/CSS для формы с готовым fixed-позиционированием - в песочнице.