Модальное диалоговое окно с формой
Создайте функцию showPrompt(html, callback), которая выводит форму с сообщением (html), полем ввода и кнопками OK/ОТМЕНА.
- Пользователь должен ввести что-то в текстовое поле и нажать Enter или кнопку «OK», после чего должна вызываться функция
callback(value)со значением поля. - Если пользователь нажимает Esc или кнопку «ОТМЕНА», тогда вызывается
callback(null).
В обоих случаях нужно завершить процесс ввода и закрыть диалоговое окно с формой.
Требования:
- Форма должна быть в центре окна.
- Форма является модальным окном, это значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.
- При показе формы, фокус должен находиться сразу внутри
<input>. - Клавиши Tab/Shift+Tab должны переключать фокус между полями формы, не позволяя ему переходить к другим элементам страницы.
Пример использования:
showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
alert(value);
});Демо во фрейме:
P.S. HTML/CSS исходного кода к этой задаче содержит форму с фиксированным позиционированием, но вы должны сделать её модальной.
Модальное окно может быть реализовано с помощью полупрозрачного <div id="cover-div">, который полностью перекрывает всё окно:
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}Так как он перекрывает вообще всё, все клики будут именно по этому <div>.
Также возможно предотвратить прокрутку страницы, установив body.style.overflowY='hidden'.
Форма должна быть не внутри <div>, а после него, чтобы она не унаследовала полупрозрачность (opacity).