Свой "prompt"

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

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

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

Форма должна показываться по горизонтали — в центре, по вертикали — на 150px от верхней границы окна.
При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно — модальное.
При показе формы фокус должен переходить на текстовый элемент для ввода.
DOM-структура формы должна содержаться в HTML/CSS, чтобы её было легко менять и стилизовать.

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

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

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

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

Создайте HTML/CSS для формы. Позиционируйте форму при помощи CSS.
Решите задачу как сделать форму модальной.
Напишите общее решение с обработчиками.

Решение, шаг 1

Решение

Решение, шаг 1

HTML/CSS для формы: tutorial/form/prompt-1/index.html.

Решение, шаг 2

Модальное окно делается путём добавления к документу DIV, полностью перекрывающего документ и имеющего больший z-index.

В результате все клики будут доставаться этому DIV'у:

Стиль:

#cover-div {
  width: 100%;
  height: 100%;
  z-index: 9000;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.1;
  background-color: gray;
  filter: alpha(opacity=10);
}

Самой форме нужно, естественно, дать еще больший z-index, чтобы она была над DIV'ом.

Решение, шаг 3

Решение: tutorial/form/prompt/index.html.

#432

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!