Два модальных окна на JQuery. Задача для опытных

Два модальных окна на JQuery

Добрый день. Стоит задача прикрутить SMS монетизацию для одного сайта. Встала необходимость в двух

аккуратных модальных окнах. Задача тривиальная, готовые решения есть, примеры я приведу. Но всё

нужно сделать точно и аккуратно. Расписано всё максимально подробно. Сделать "шоб работало" я могу и сам. Пожалуйста, оставляйте заявку, только если вы можете назвать себя спецом по Jquery.

1. Окно 1. Предлагает зарегистрироваться. Всплывает по центру экрана. Всё остальное затемняется.

CSS для модального окна, которое мне симпатично можно взять в демке "Fancy AJAX Contact Form"

http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php

В окне заголовок, место для инфы о преимуществе регистрации, и одна кнопка - "зарегистрироваться". По нажатию - открываем форму регистрации.

Рекомендую использовать плагин Jquery SimpleModal

http://www.ericmmartin.com/projects/simplemodal-demos/

Т.к. на этапе выбора оптимального варианта работы формы мне понадобится возможность отключать закрытие по Esc,

и указывать свой уровень затемнения.

Тут это делается просто:

$("#sample").modal({

escClose:false,

opacity:60,

overlayCss: {backgroundColor:"#000"}

});

На странице демок можно взять код для анимаций закрытия/открытия.

Тут есть один непонятный для меня момент, который вам предстоит пояснить. Это окно должна вызываться при клике пользователя

на определённые ссылки, которые доступны только для зарегистрированных.

В случае если такой элемент имеет один id - то вызов прост:

$(document).ready(function(){

$("#id").click(function(){

$("#simple-modal").modal({

...

А если мне нужно вызывать это окно при клике по разным элементам (id всех мне известны)?

2. Второе окно сложнее. Собственно форма регистрации. Затемнение и стиль, такие же, как и первого.

Поля: e-mail, пароль, подтверждение пароля, поле ввода номера телефона, временная кнопка "Ок", поле ввода кода и кнопка "зарегистрироваться".

Форма должна быть гравитационной. Т.е. заполнили одно поле - появилось следующее.

Пример и исходники тут http://demos.9lessons.info/slidereg/demo.html

1.Заполняем e-mail. Проверку на валидность делает скрипт. Код в исходниках примера.

Если мыло валидное скрипт отправляет post или get запрос скрипту check.php. Этот скрипт будет проверять e-mail

на уникальность. Если check.php вернул 1 - значит мыло уникальное и можно продолжать. Если check.php вернул 0,

выводим сообщение, о том, что такой пользователь уже есть в базе.

2. Появляется форма для пароля, заполняем - появляется форма подтвердждения

3. Появляется форма потвеждения пароля, заполняем - скрипт должнен сверить, что пароли одинаковые.

Если одинаковые - продолжаем, если разные - сообщение о том, что пароли не совпадают.

4. Появляется форма ввода номера телефона и кнопка "Ок". После ввода номера и нажатия на кнопку "ОК",

скрипт отправляет методом POST введённые номер скрипту sms.php. После этого кнопку "ОК" прячем

4.1. Если скрипт вернул "invalid_phone", то выводим сообщение об неправильно введённом номере телефона и снова показываем кнопку "Ок".

4.2. Если скрипт ввернул "ок" выводим сообщение "Полученный код следует ввести в поле внизу". Выводим поле для кода проверки

и кнопку "зарегистрироваться".

4.3. Если скрипт вернул "invalid_operator" - выводим сообщение "Следует отправить SMS на номер XXX c текстом YYY. Полученный код ввести в поле внизу",

выводим кнопку "Зарегистрироваться".

5. По нажатию на кнопку "зарегистрироваться" отправляем скрипту sms.php методом POST e-mail, пароль, номер телефона и введённый код.

Если скрипт отвечает "invalid_code" - выводим сообщение, что введённый код неверный. Если скрипт отвечает "ок" - выводим сообщение

об успешной регистрации и закрываем форму.

6. Во время заполнения формы должны появляться подсказки. Во время заполнения e-mail сообщение о том, почему нужно вводить правильный,

во время ввода пароля - о том, что пароли должны совпадать и быть сложными, во время ввода номера телефона, о том, что

он должен быть реальным.

Где размещать эти подсказки - решать вам. Как пример - можно использовать всплывающие выноски,

как на этой картинке: http://efimov.ws/assets/images/develop/script/2010/12/06/13.jpg

О вас html'ка с тестовой страницей и скриптами.

Оплата строго в WMR после того, как я проверю работу и меня всё устроит.

Указываем сроки и сумму. Ценник прошу не ломить, я прекрасно осознаю реальную степень сложности этой задачи,

оцениваю время, которое на неё нужно потратить, и представляю себе стоимость часа работы специалиста.

Очень желательно наличие у исполнителя ICQ или Skype для оперативной связи.

Сделаете сегодня - заплачу сегодня. Сделаете завтра - заплачу завтра вечером, когда доберусь домой, т.к. днём на работе.