Для сайта
увлекательныймгу.рф/%D1%8... заверстать форму "Записаться" во всплывающем окне. Смотри рисунок.
По пунктам:
1. Подчёркнутые ссылки со словом "Записаться" (например здесь:
увлекательныймгу.рф/%D1%8... вызывают всплывающее окно "Записаться" (в макете смотри слой BOX SIGN). Для этого вызова нужна js функция showSignBox(tourId), с необязательным параметром tourId, который будет задаваться в зависимости от того, по какой ссылке кликнули. Если tourId задан, в выпадающем списке экскурсий уже выставлено название экскурсии.
2. Все текстовые поля имеют плейсхолдеры.
3. Кнопка реагирует на наведение изменением стиля. Как реагирует смотри в макете слой REVIEW PAGE, пальцы над кнопками и слои over.
4. Выпадающий список реагирует на наведение и нажатие изменением стиля. смотри в макете слой REVIEW PAGE слой dropdown over и dropdown hit.
5. Группа текстовых полей (email, имя, телефон) состоят из общего фона и нескольких текстовых полей без границ и с выравниванием текста по центру.
6. Форма имеет функцию js-валидации. По умолчанию она возвращает true. Потом в неё будут добавлены необходимые условия.
7. В форме все текстовые поля и textarea меняют стиль, если в них допущена ошибка. Как меняют стиль, смотри в макете слой REVIEW PAGE покраснение рамок и текста.
8. Поле "класс" появляется только если выбрана радиокнопка "Детей (до 18 лет)" (show/hide).
9. При клике на поле "Предполагаемые дата и время посещения" как и другие поля с пиктограммой календаря на сайте всплывает jQuery календарь, как здесь:
sletat.ru/ Календарь с возможностью блокировать некоторые даты.
Если нет такого же удобного календаря с возможностью выставлять время, вынемем время в отдельное поле.
10. Ссылка "Указать другие необходимые параметры (можно указать позже)" раскрывает блок ["Ответственным за групу (сопровождающим)", "Номер паспорта ответственного за группу", "Список участников экскурсии (ФИО или Фамилия-Имя для детей)"]. Раскрываются все блоки сверху вниз (slideDown). По умолчанию блок скрыт.
11. Ссылка "Сообщите ваши пожелания или другую важную информацию" раскрывает textarea такую же как и под "Список участников экскурсии (ФИО или Фамилия-Имя для детей)".
12. Окно всплывает таким образом, что блок начинается от верха видимой области браузера с отступом 10px. Окно возникает методом fadeIn.
13. Для окна создать отдельный css-ник.
14. Фон под окном имеет замощение (дано в отдельном макете). При клике на фон окно скрывается (fadeOut).