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

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

важность: 5

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

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

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

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

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

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

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

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

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

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

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

Стиль:

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

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

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