Модальна форма
важливість: 5
Створіть функцію showPrompt(html, callback), яка показує форму з повідомленням html, полем введення та кнопками OK/СКАСУВАТИ.
- Користувач повинен ввести щось у текстове поле і натиснути Enter або кнопку ОК, після чого буде викликано
callback(value)з введеним значенням. - В іншому випадку, якщо користувач натискає Esc або СКАСУВАТИ, тоді викликається
callback(null).
В обох випадках це завершує процес введення та видаляє форму.
Вимоги:
- Форма повинна знаходитися в центрі вікна.
- Форма – це модальне вікно. Іншими словами, жодна взаємодія з іншою частиною сторінки неможлива, поки користувач не закриє її.
- Коли відображається форма, фокус має бути всередині
<input>для користувача. - Клавіші Tab/Shift+Tab повинні зміщувати фокус між полями форми, не дозволяючи йому залишати форму і переходити на інші елементи сторінки.
Приклад використання:
showPrompt("Введіть щось<br>...розумне :)", function(value) {
alert(value);
});Демо в iframe:
P.S. У вихідному документі є HTML/CSS для форми з фіксованим позиціонуванням, але ви можете зробити її модальною.
Модальне вікно можна реалізувати за допомогою напівпрозорого `
, який охоплює все вікно, наприклад:
#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.