Модальное диалоговое окно
важность: 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'ом
. Мы не помещаем форму в контейнер, чтобы она не унаследовала полупрозрачность.