init

02-ui/04-forms-controls/04-forms-submit/01-modal-dialog/task.md

@@ -0,0 +1,37 @@
+# Модальное диалоговое окно
+
+[importance 5]
+
+Создайте функцию `showPrompt(text, callback)`, которая выводит форму для ввода с сообщением `text` и кнопками `ОК/Отмена`.
+
+<ul>
+<li>При отправке формы (OK/ввод в текстовом поле) -- должна вызываться функция `callback` со значением поля.</li>
+<li>При нажатии на `Отмена` или на клавишу [key Esc] -- должна вызываться функция `callback(null)`. Клавиша [key Esc] должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.</li>
+</ul>
+
+Особенности реализации:
+<ul>
+<li>Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!).</li>
+<li>Текст может состоять из нескольких строк, возможен любой HTML</li>
+<li>При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно -- *модальное*.</li>
+<li>При показе формы -- сразу фокус на `INPUT` для ввода.</li>
+<li>Нажатия [key Tab]/[key Shift+Tab] переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.</li>
+</ul>
+
+Пример использования:
+
+```js
+showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
+  alert(value);
+});
+```
+
+Открыть в новом окне: (нажмите там на кнопку) <a href="/files/tutorial/form/prompt/index.html" target="_blank">tutorial/form/prompt/index.html</a>.
+
+Разбейте решение на этапы:
+<ol>
+<li>Создайте HTML/CSS для формы.</li>
+<li>Расположите форму в центре при помощи CSS (можно отцентрировать и через JavaScript, но тогда нужно будет при изменении размеров окна пересчитывать координаты формы, так что CSS лучше). Имейте в виду, что её размер по вертикали неизвестен, так как зависит от количества текста.</li>
+<li>Решите задачу: как сделать форму модальной, чтобы посетитель не мог нажать на другое место страницы или через [key Tab] уйти с формы.</li>
+<li>Напишите общее решение с обработчиками.</li>
+</ol>